为什么 setInterval 函数不能正常工作？答案

【问题标题】：Why is the setInterval function not working properly?为什么 setInterval 函数不能正常工作？
【发布时间】：2020-10-21 06:19:05
【问题描述】：

它一直显示它是一个无限循环的错误消息。我只是开始学习 React，这是一个 Clicker 游戏。如何更改我的代码以使 setInterval 工作。谢谢。（顺便说一句，我不希望对不会影响 setInterval 函数的代码进行任何其他更改。是的，我已经在许多项目中使用了 setInterval 并且效果很好。）

import "./styles.css";

export default function App() {
  let [num, setNum] = useState(0);
  let [add, setAdd] = useState(1);
  let [numC, setNumC] = useState(0);
  let [numCP, setNumCP] = useState(10);
  let [numW, setNumW] = useState(0);
  let [numWP, setNumWP] = useState(20)
  setInterval(setNum(num+=numW),3000);
  const click = () => {
    setNum((num += add));
  };
  const clicker = () => {
    if (num >= numCP) {
      setNumC((numC += 1));
      setNum((num -= numCP));
      setNumCP((numCP += 5));
      setAdd((add += 1));
    }
  };
  const worker = () => {
    if (num >= numWP) {
      setNumW((numW += 1));
      setNum((num -= numWP));
      setNumWP((numWP += 10));
    }

  };
  return (
    <div className="App">
      <h1>Clicker Game</h1>
      <div>
        {num}
        <button onClick={click}>Click</button>
      </div>
      <p />
      <div>
        {numC}
        <button onClick={clicker}>Buy({numCP})</button>
      </div>
      <div>
        {numW}
        <button onClick={worker}>Buy({numWP})</button>
      </div>
    </div>
  );
}```

【问题讨论】：

标签： reactjs setinterval

【解决方案1】：

有几个问题。

首先，当您应该传递一个回调以在间隔被传递时执行时，您会立即调用setNum。

所以setInterval(() => setNum(num+=numW),3000);

但是现在您遇到了第二个问题，每次重新渲染组件时，您都会启动一个额外的间隔。（它会被重新渲染很多次，至少每次触发间隔回调时）

因此，如果您想设置它并让它连续运行，您可能需要使用具有 0 个依赖项的 useEffect，以便它运行一次。

useEffect(() => {
  setInterval(() => setNum(num += numW), 3000);
}, []);

但是现在你会遇到另一个问题。间隔中使用的num 和numW 将被锁定为组件第一次渲染中的值。

对于num，您可以通过使用callback 的setNum 语法来解决它

useEffect(() => {
  setInterval(() => setNum(currentNum => currentNum += numW), 3000);
}, []);

但numW 永远不会更新。

最后一个工具是在每次numW 或num 更改时重置间隔。为此，您需要从 useEffect 返回一个用于清除的函数。

useEffect(() => {
  const interval = setInterval(() => setNum(currentNum => currentNum += numW), 3000);
  return () => clearInterval(interval);
}, [numW]);

但这会有一个小问题，即间隔现在不是恒定的，因为它会重置。

【讨论】：

@AleksandraMarusii 只需将代码中的 setInterval 行替换为我答案中的最后一个 sn-p 即可。

【解决方案2】：

每次您的状态变量之一发生变化时，都会重新渲染组件，即再次调用函数App。这将一遍又一遍地调用setInterval。

您想查看useEffect 以将您的setIntervals 放入。

【讨论】：