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

您不仅要设置每个渲染的状态 - 导致无限循环，而且您要添加一个 new 间隔来设置每个渲染的状态。所以每次你添加越来越多的无限 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.

React useState 进入死循环

React useState entering infinite loop

javascript

reactjs

use-state