reactjs - 尝试在反应js中进行计数器时超过最大调用堆栈大小

Question

尝试在 React js 中进行计数器时超出最大调用堆栈大小。我正在使用功能组件来创建计数器。这将从0开始，每次增加10，直到达到最大限制。 这是我的代码

const [initialCount, setInitialCount] = useState(0);
useEffect(() => {
  const handleScoreAnimate = () => {
    if (initialCount >= maxLimit) {
      setInitialCount(maxLimit);
    } else {
      setInitialCount(initialCount + 10);
      handleScoreAnimate();
    }
  }
  if (initialCount === 0) {
    handleScoreAnimate();
  }
}, [initialCount]);

Answer 1

该错误是由于递归调用handleScoreAnimate函数 in useEffect。

你可能会得到更好的解决方案，但你可以利用setTimeout来实现这一点，

useEffect(() => {

   const timer = setTimeout(()=>{
      setInitialCount(c => c >= maxLimit ? maxLimit : c + 10)
   },1000)  //timeout can be adjusted according to your need

   //This is to clear the timeout when component unmounts
   return () => clearTimeout(timer);

}, [initialCount]);

演示