反冲状态未能正确更新

Question

我有如下代码。

const [verificationValues, setValues] = useRecoilState(verificationFormValues);
setValues({
   ...verificationValues!,
   nidOrPassport,
   addressProof,
   recentPhoto,
   bankAccountStateMents,
   businessProof,
   salarySlip,
   employeeIdCard,
});

在我提交表单后，我调用了setValues函数。当我通过console.log验证verificationValues时，它没有更新verificationValues。但是如果我在提交处理程序之后将值记录到控制台，那么它会运行并显示更新后的值。另外，我刚刚注意到，当我再次按下提交按钮后，它就会起作用。另外，setValues函数不是异步的，不需要花费一些时间来完成。那么为什么会发生这种情况呢？

重要提示

那些nidOrPassport、addressProof、recentPhoto等都是对象。

- Pranta

Answer 1

实际上这是一个React问题。setValues正在更新值，但是更新后的值只能在下一次渲染时访问。所以我必须使用useEffect hook，现在它可以正常工作了。

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

2022年7月更新

React现在支持自动批处理。如果您使用React 18或更早版本，则可以通过使用flushSync来避免此问题。

在Github Discussions上了解更多信息

- Pranta