Используйте setinterval в React - PullRequest
Новая
       12

Используйте setinterval в React

0 голосов
/ 26 октября 2019

Я пытаюсь использовать setInterval в React, но застрял на чем-то, что я не совсем правильно понимаю.

Код: 

const Countdown = () => {
   const [countdownSecond, setCountdownSecond] = React.useState(0);
   function x() {
      console.log(countdownSecond);
      setCountdownSecond(countdownSecond + 1);
   }

  return (
    <>
      <button onClick={() => setInterval(x, 1000)}>Start</button>
          {countdownSecond}
    </>
  );
}

Проблема в том, что консоль всегда подключается к0. Я не уверен, почему это так. Какую концепцию я неправильно понимаю?

1 Ответ

0 голосов
/ 26 октября 2019

Вы можете сделать: 

const Countdown = () => {
   const [countdownSecond, setCountdownSecond] = React.useState(0);
   const [start, setStart] = React.useState(false);

   React.useEffect(()=>{
       const interval = null
       if (start) {
           interval = setInterval(()=>{
               setCountdownSecond(countdownSecond + 1);
           }, 1000);
       }
       return ()=>{if (interval !== null) clearInterval(interval)};
   },[start]);

   function x(e) {
      e.preventDefault();
      console.log(countdownSecond);
      setStart(!start);
   }

  return (
    <>
      <button onClick={(e) => x(e)}>{start?"Stop":"Start"}</button>
      <p>Countdown:&nbsp;{countdownSecond}</p>
    </>
  );
}
...