从 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(c => ...)' 如果你只需要'counter' 'setCounter' 调用。 (react-hooks/exhaustive-deps)

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

我只希望计数器在 clicked 从 false 变为 true 时递增。如果依赖项列表仅包含 clicked，则此方法有效，但 React 会抱怨这一点。

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

Answer 1

尝试将 setCounter(counter + 1) 替换为：

setCounter(counter => counter + 1)

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

Answer 2

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

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

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

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

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如果您取消超时，您的无限循环问题将会消失（顺便说一句，它的用途是什么？）您是否尝试实现去抖动或节流？我可以编辑这个答案来实现你想要的