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)是一个异步调用，这意味着您将无法在下一行获得结果。

您可以使用useEffect钩子。

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

从您的问题看来，您具有React的Class组件的背景，因此useEffect与componentDidMount和componentDidUpdate生命周期方法相似。

useEffect会在依赖项数组（在您的情况下为[fieldValues]）中的状态发生变化并在useEffect正文中获取更新后的值时进行调用。

您也可以在componentWillUnmount中执行useEffect的工作。

简要介绍guide。

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]);

React挂钩会随时更新

2 个答案: