尝试在 React 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

该错误是由于在useEffect中对handleScoreAnimate函数进行递归调用。

您可能会得到更好的解决方案，但您可以利用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]);

演示