React console.log (i) распечатывает результат предварительного просмотра

Question

С приведенным ниже кодом - методы handleChange используются в полях формы:

1. начиная с i = 0
2. с первым изменением
3. i должно получить обновлено с помощью i+1
4. и console.log(i) = должно быть 1, но получится 0

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

Спасибо

const [i, setI] = useState(0)

const handleChange = input => event => {
        setI(i + 1)
        console.log(i)
        }

<ChildFormComponent handleChange={handleChange}/>

Answer 1

Функция setI является асинхронной c. I обновляется не синхронно, а асинхронно. Если вы хотите зарегистрировать новое значение i, используйте ловушку useEffect и добавьте i в качестве зависимости.

React.useEffect(() => {
  console.log(i)
}, [i])

Answer 2

Вы уверены в своей декларации handleChange? Должен ли он возвращать вам функцию?

const handleChange = input => event => {
  setI(i + 1)
  console.log(i)
}

Не могли бы вы вместо этого попробовать что-то похожее

const handleChange = event => {
  setI(i => i + 1)
}

И не беспокойтесь о console.log(i), поскольку обновления состояния асинхронны.

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