在 useEffect 中改变多个状态会导致 react-hooks/exhaustive-deps 警告

Question

我在玩 React Hooks。单击按钮时，我想增加一个计数器。计数器递增后，应用程序不应允许进一步递增，直到 clicked 重置为 false。

我想出了这个：

function App() {
  const [counter, setCounter] = useState(0);
  const [clicked, setClicked] = useState(false);

  useEffect(() => {
    if (clicked) {
      setCounter(counter + 1);
      setTimeout(() => {
        setClicked(false);
      }, 2000);
    }
  }, [clicked]);

  return (
    <div className="App">
      <p>Clicked: {String(clicked)}</p>
      <p>Counter: {counter}</p>
      <button type="button" onClick={() => setClicked(true)}>
        Click me
      </button>
    </div>
  );
}

它确实有效。然而，React 抱怨以下警告：

React Hook useEffect 缺少一个依赖项：'counter'。包括它或删除依赖项数组。如果您只需要在 'setCounter' 调用中使用 'counter'，您还可以执行功能更新 'setCounter(c => ...)'。(反应钩子/详尽的deps)

当我将计数器添加到依赖项时，useEffect 将进入无限循环，因为clicked为 true 并且 setCounter 是从 useEffect 中调用的。

我希望计数器仅在单击时从 false 更改为 true递增。如果依赖项列表只包含clicked，那会起作用，但是 React 会抱怨。

自己试试：https : //codesandbox.io/s/dreamy-shadow-7xesm

Answer 1

尝试用这个替换 setCounter(counter + 1) ：

setCounter(counter => counter + 1)

就像警告说的那样。应该解决。