Состояние React Hook имеет разные значения относительно нескольких равных событий

Question

Хорошо, поэтому я сейчас создаю компонент для создания тестов.

Так что в качестве локального состояния он имеет массив подкомпонентов, которые используются для создания 1 вопроса и его возможных ответов.

Я хочу, чтобы он давал возможность создавать столько новых вопросов, сколько пользователь хочет, чтобы он также мог удалить вопрос, созданный им во время теста.

Проблема здесь, я даю свой субкомпонент функция как подпорка для вызова действия по удалению. Следует удалить компонент по индексу подкомпонента, который его вызвал.

export default function QuizzManagement({sections}) {

    //const selectedSection = useSelector(state => state.classManagement)
    const [quizzList, setQuizzList] = useState([<QuizzCreator key={0} index={0} removeQuestion={removeQuestion}/>])

    useEffect(() => {
        //get quizz by section
    }, [])

    const addQuestion = () => {
        setQuizzList([...quizzList,<QuizzCreator key={quizzList.length} index={quizzList.length} removeQuestion={removeQuestion}/>])
    }

    function removeQuestion (index) {
        console.log(quizzList)
    }

    return (
        <div>
            <SectionSelector sections={sections} />
            <div>
                {...quizzList}
            </div>
            <button onClick={()=>addQuestion()}>Add</button>
        </div>
    )
}

Здесь я заменил механизм функции removeQuestion, чтобы понять, что происходит.

подпрограмма -компонент:

<div>
            <textarea 
                placeholder="question ..." 
                value={question} 
                onChange={e => setQuestion(e.target.value)}>
            </textarea>
            <div>
                {inputFields}
            </div>
            <button onClick={()=> setAnswers([...answers, {text: "", isCorrect:false}])}>Add</button>
            <button onClick={()=>removeQuestion(index)}>Delete</button>
        </div>

Каждый зарегистрированный список quizzList отличается:

Array [ {…} ]

Array [ {…} ]

Array [ {…}, {…} ]

Array(3) [ {…}, {…}, {…} ]

Я щелкнул только один раз, когда был создан каждый вопрос и что состояние обновлено с помощью инструмента реагирования.

Я не понимаю!

снимок экрана

Answer 1

По моему мнению, вы абсолютно не должны хранить компоненты как ваше состояние - скорее, вы должны хранить реквизиты, которые вы отправляете компоненту как ваше состояние:

const [quizzList, setQuizzList] = useState([{index:0, key:0}]);

const addQuestion = () => {
    setQuizzList([...quizzList,{key: quizzList.length, index: quizzList.length}])
}

Тогда, когда вы рендеринг, сделайте

{quizzList.map(qlo => (<QuizzCreator key={qlo.key} index={qlo.index} removeQuestion={removeQuestion}/>))}

ОДНАКО, есть одна вещь, которую я не исправил - я не верю, что вы должны установить ключ на index, и я не верю, что вы должны удалить элемент на index либо. Вероятно, вам следует генерировать случайную строку каждый раз, когда вы добавляете элемент в массив, и используете его в качестве ключа и того, что вы используете в своей removeQuestion функции