React useState 進入死循環

Question

我正在使用 setInterval 來增加計數並將其顯示在如下所示的 div 上。 我確信 incrementcount 工作正常。 不知道我在做什么錯誤。

function DivClicker() {
 const [count, setCount] = React.useState<number>(0);

 function incrementCount():void{
    setCount((prev)=>prev+1);
 }
 setInterval(incrementCount,1000);

  return (
    <div>
        <div className='middle-div'>
            <div>{count}</div>
        </div>
    </div>
  )
}

export default DivClicker;

它正在變得瘋狂，並在幾秒鍾內大幅增加。請指導。 大多數情況下，它會進入無限循環。 我不知道為什么。

Answer 1

您不僅為每個渲染設置 state - 導致無限循環，而且您添加了一個新的間隔，為每個渲染設置 state。 所以每次你添加越來越多的無限 setStates。

通過在useEffect中僅設置一次間隔來解決此問題：

function DivClicker() {
 const [count, setCount] = React.useState<number>(0);

 function incrementCount():void{
    setCount((prev)=>prev+1);
 }
 
 useEffect(() => {
   const interval = setInterval(incrementCount,1000);

   return () => clearInterval(interval);
 }, []);

  return (
    <div>
        <div className='middle-div'>
            <div>{count}</div>
        </div>
    </div>
  )
}

export default DivClicker;

如果您收到有關缺少依賴項的 es-lint 警告，您可以將incrementCount移動到useEffect中。