Почему функция таймера не работает в React

#javascript #reactjs

Вопрос:

Я пытаюсь настроить функцию времени, но по-прежнему возникают проблемы с ее работой. Вот мой код:

 const [riddlecount, setRiddlecount] = useState(30)


 const Timer = setInterval(function(){
      if(riddlecount <= 0){
        clearInterval(Timer);
        setRiddlecount("Time is up")
      } else {
        setRiddlecount(riddlecount   " seconds remaining");
      }
      setRiddlecount(riddlecount -= 1);
    }, 1000); 

Ответ №1:

Вам нужно глубже разобраться в том, как работают состояния в React, ваш код вызывает бесконечный цикл.

Вот некоторые ресурсы https://fr.reactjs.org/docs/hooks-state.html

Я думаю, что вы ищете что-то подобное

 function App() {
  const [riddleCount, setRiddlecount] = useState(30);

  useEffect(() => {
    const timer =
    riddleCount > 0 amp;amp; setInterval(() => setRiddlecount(riddleCount - 1), 1000);
    return () => clearInterval(timer);
  }, [riddleCount]);

  return (
    <div className="App">
      {riddleCount === 0 ? 'Time is up' : undefined}
      <div>{riddleCount} seconds remaining</div>
    </div>
  );
}
 

https://codesandbox.io/s/react-hooks-playground-forked-ec0wt