在useEffect内改变多个状态会导致react挂钩/详尽的deps警告

Question

我在胡闹。单击按钮时，我想增加一个计数器。计数器递增后，在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 use效应缺少一个依赖项：计数器。要么包含它，要么删除依赖数组。你也可以做一个函数更新set计数器（c=

当我将计数器添加到依赖项时，use效应将进入一个无限循环，因为单击为true，而set计数器是从use效应中调用的。

我希望计数器只能递增，当点击从假变为真。如果依赖项列表只包含单击，则可以工作，但React会对此进行抱怨。

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

Answer 1

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);

如果删除超时，无限循环的问题将消失（顺便问一下，它是用于什么的？）你是想实施去盎司还是节流？我可以编辑此答案以达到您的要求

Answer 2

尝试用以下内容替换setCounter（计数器1）：

setCounter(counter => counter + 1)

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