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

debugcn 发表于 Dev

亚历山德拉·马鲁西（Alexandra Marusii）

它不断显示错误消息，它是一个无限循环。我只是请求学习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>
  );
}```

加布里埃莱·彼得里奥利（Gabriele Petrioli）

有几个问题。

首先，setNum当要传递一个要在间隔过去时执行的回调时，您立即调用。

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

但是现在有了第二个问题，每次重新渲染组件时，您都将启动一个附加间隔。（并且它将至少在每次触发间隔回调时重新渲染很多）

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。