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

您可以使用useEffect挂钩。

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

从您的问题中可以看出，您有React的Class组件的背景，所以useEffect类似于componentDidMount和componentDidUpdate的生命周期方法。

每当依赖数组中的状态(在您的情况下为[fieldValues](发生变化并且您在useEffect主体中获得更新的值时，useEffect就会调用。

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

有一个简短的指南。

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