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

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

React Hook useEffect has a missing dependency when updating state based on current value

reactjs

react-hooks

dependencies