Переменная useState не последняя версия в функции удаления, React - PullRequest
Новая
       34

Переменная useState не последняя версия в функции удаления, React

2 голосов
/ 12 марта 2020

У меня есть список div, которые содержат поля вопросов. Для каждого нажатия кнопки я добавляю новую строку полей с вопросами и запоминаю весь список и количество строк. Я попытался добавить кнопку удаления, но когда мои функции удаления, кажется, что значение из переменной состояния запоминается с момента создания строки. Как мне решить эту проблему, чтобы я мог получить доступ к полному списку в функции HandleDelete? 

const OefeningAanvragenDagboek = () => {
const { t, i18n } = useTranslation()
const [questionCount, setQuestionCount] = useState(1)
const [questionList, setQuestionList] = useState([])

const createNewLine = () =>{
    var newLine=
        <div>
            <Field type="text" name={"vraag" + questionCount}/>
            <Field component="select" name={"antwoordMogelijkheid"+questionCount}>
                <option value="">...</option>
                <option value="open">{t('oefeningAanvragenDagboek.open')}</option>
                <option value="schaal">{t('oefeningAanvragenDagboek.scale')}</option>
            </Field>
            <Field type="text" name={"type"+questionCount}/>
            <button onClick={() => HandleDelete(questionCount-1)}>{t('assignmentCard.delete')}</button>
        </div>

    setQuestionList(questionList => [...questionList, newLine])
    setQuestionCount(questionCount+1)
}

const HandleDelete = (index)=> {
    console.log(questionList)
    // setQuestionList(questionList.splice(index, 1))

}

return (
    <div>
        <button onClick={createNewLine}>{t('oefeningAanvragenDagboek.addQuestion')}</button>
        {questionList}
    </div>
)

}

1 Ответ

1 голос
/ 12 марта 2020

Использование функционал setState, поскольку HandleDelete имеет закрытие на questionList 

setQuestionList(questionList => questionList.splice(index, 1))

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

...