React-hook-form при отправке и проблеме useState

Эй, так что я столкнулся с этой странной проблемой при использовании формы реакции-хука.

Это суть моего кода

const [error, setError] = useState(true)

const onSubmit = values => {
    setError(false)
    console.log(error) // true on first click and false on second click
}
<input type="submit" />

Как вы можете видеть, я получаю сообщение об ошибке true при первом нажатии на ввод и false при втором нажатии на него.

Я ожидаю, что ошибка будет ложной при первом нажатии на ввод. Кто-нибудь знает, почему это правда?

Примечание. Моя форма — это вложенная форма, в которой я использую FormContext, чтобы обернуть свою форму, чтобы я мог разделить форму на более мелкие компоненты. Может быть, это вызывает этот побочный эффект или это просто что-то очевидное, что я упускаю?


reactjs react-hooks react-hook-form
person Ziyak    schedule 08.06.2020    source источник
comment
Это опечатка? const useState[error, setError] = useState(true)   -  person Taghi Khavari    schedule 08.06.2020
comment
Да это опечатка. Мой плохой я отредактирую.   -  person Ziyak    schedule 08.06.2020

Ответы (2)


arrow_upward
0
arrow_downward

Да, React такой странный. setError(false) запускается в первый раз и меняет состояние, но синхронность не гарантируется. Таким образом, console.log() сразу после этого все еще имеет старое состояние.

React ловушки useState не обновляются с помощью onChange

person georgedum    schedule 08.06.2020
comment
Ах, спасибо! Я решил свою проблему, отказавшись от useState, но все еще задавался вопросом, почему useState не работает. Это проясняет ситуацию. - person Ziyak; 08.06.2020

arrow_upward
0
arrow_downward

Изменения состояния React являются асинхронными. Не гарантируется, что вы получите самое последнее изменение в синхронном console.log. Правильный способ регистрации значения, если вы хотите увидеть самые последние изменения, — внутри хука useEffect.

const [error, setError] = useState(true)

useEffect(() => {
  console.log(error)
}, [error]);
person subashMahapatra    schedule 08.06.2020