максимальный размер стека вызовов превышается при попытке сделать счетчик в реакции js

Максимальный размер стека вызовов превышается при попытке выполнить счетчик в реакции 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]);

reactjs react-hooks use-effect recursion
person Gmv    schedule 16.09.2019    source источник
comment
Вы хотите показать задержку при обновлении своего состояния?   -  person ravibagul91    schedule 16.09.2019
comment
как цифровой спидометр.   -  person Gmv    schedule 16.09.2019

Ответы (1)


arrow_upward
1
arrow_downward

Ошибка связана с рекурсивным вызовом функции handleScoreAnimate в 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]);

Демо

person ravibagul91    schedule 16.09.2019