在 React 中使用 setinterval [英] Use setinterval in React

问题描述

我正在尝试在 React 中使用 setInterval，但遇到了一些我不太理解的问题.

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

代码是:

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.我不知道为什么会这样.我误解了什么概念?

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

推荐答案

您可以:

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

这篇关于在 React 中使用 setinterval的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！