Use setinterval in React

问题

I'm trying to use setInterval in React but stuck on something I don't properly understand.

The code is:

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}
    </>
  );
}

The issue is that console always logs to 0. I'm not sure why is that. What concept am I misunderstanding?

回答1:

You can do:

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>
    </>
  );
}

来源：https://stackoverflow.com/questions/58567640/use-setinterval-in-react