React Hook useEffect 在根据当前值更新状态时缺少依赖项

Question

我需要根据当前值更新 React 状态的当前值。但是，使用当前状态会触发警告：React Hook useEffect has a missing dependency。如何更新状态？

为简单起见，假设我必须计算另一个状态的更新次数：

[myState, setMyState] = useState("");
[counter, setCounter] = useState(0);

useEffect(()=>{
 setCounter(counter+1);
},[myState]) // React Hook useEffect has a missing dependency: 'counter'

但是，我不能在 依赖项中添加 counter，因为 useEffect 将进入 无限循环（因为 hook 将由于counter 更改而再次触发）。

Answer 1

实现此类更改的最佳方式是在setState 方法中使用回调。通过使用回调，我们可以访问状态的当前值，而无需直接引用包含状态的对象。这样就不会发出警告，直接执行计数器即可。

[myState, setMyState] = useState("");
[counter, setCounter] = useState(0);

useEffect(()=>{
 setCounter(currentCounter => currentCounter+1);
},[myState]) // No warning here

或者如果您需要更复杂的操作：

useEffect(()=>{
 setCounter(currentCounter => {
   //do stuff
   return currentCounter+1
 });
},[myState]) // No warning here

完整文档：https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous