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缺少依赖项：“计数器”。要么包括它或删除依赖项数组。您也可以如果只需要在其中添加“计数器”，则进行功能更新“ setCounter（c => ...）” “ setCounter”调用。（反应钩/详尽的下降）

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

当单击从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);

如果您删除超时（顺便说一句，它的作用是什么？），那么您遇到的无限循环问题将不复存在，您是否打算实施去抖或抑制功能？我可以编辑此答案以实现您想要的

在use内使多个状态发生突变效果会引起反应钩/详尽的下降警告

2 个答案: