React-хуки обновляют своего рода всякий раз, когда им хочется

Question

Итак, я использую ловушки для управления состоянием набора форм, настроенного так:

    const [fieldValues, setFieldValues] = useState({}) // Nothing, at first

При установке значения состояние не обновляется:

    const handleSetValues = values => {
        const _fieldValues = {
            ...fieldValues,
            ...values
        }

        setFieldValues(_fieldValues)

        console.log(fieldValues) // these won't be updated

        setTimeout(() => {
            console.log(fieldValues) // after ten seconds, it's still not updated
        },10000)
    }

Если я вызову функцию во второй раз, она обновится, но это не сработает для меня. Я никогда не видел такого поведения в компонентах класса.

Это значит ... вроде, не обновлять? Или просто обновлять всякий раз, когда хочется? Действительно запутанное поведение.

Answer 1

setFieldValues(_fieldValues) - это асинхронный вызов c, означающий, что вы не сможете получить результат в следующей строке.

Вы можете использовать useEffect hook.

useEffect(() => {
    // do your work here
  }, [fieldValues]);

Из вашего вопроса видно, что у вас есть опыт работы с компонентами класса React, поэтому useEffect похож на componentDidMount и componentDidUpdate методы жизненного цикла.

useEffect вызывает всякий раз, когда изменяется состояние в массиве зависимостей (в вашем случае [fieldValues]), и вы получаете обновленное значение в useEffect body.

Вы также можете выполнить componentWillUnmount работа в useEffect также.

Имейте краткое руководство .

Answer 2

setFieldValues - асинхронная функция, поэтому запись значения под оператором не будет иметь никакого эффекта.

Что касается использования setTimeout, функция будет фиксировать текущее значение реквизита, передаваемого ей, и, следовательно, это будет значение, выводимое на консоль. Это верно для любой функции JS, см. Фрагмент ниже:

function init(val) {
  setTimeout(() => {
      console.log(val);
  }, 1000);
}

let counterVal = 1;

init(counterVal);
counterVal++;

Так, как мы можем напечатать значения, когда значение изменяется? Простой механизм заключается в использовании useEffect:

useEffect(() => {
  console.log(fieldValues)
}, [fieldValues]);