Question

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

Answer 1

每次状态变量之一更改时，组件都会重新呈现，即再次调用函数# id cat #1: 1 3 #2: 2 4 #3: 3 1 #4: 4 4 #5: 5 2。这将一遍又一遍地调用App。

您要查看useEffect来放入setInterval。

Answer 2

有两个问题。

首先，当您应该传递要在间隔经过后执行的回调时，您将立即调用setNum。

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

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

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

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

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

对于num，您可以使用callback的{{1}}语法来解决它

setNum

但是useEffect(() => { setInterval(() => setNum(currentNum => currentNum += numW), 3000); }, []);将永远不会更新。

最后一种工具是每次numW或numW更改时重置间隔。为此，您需要从num返回执行清除操作的函数。

useEffect

但这会带来一个小问题，因为间隔会重置，因此间隔现在不是恒定的。

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

2 个答案: