Javascript 如何清除React中的间隔

我正在使用react.js中的

useState

钩子构建秒表，但在实现暂停功能时，我注意到我无法清除间隔。我是新来的，我尝试了很多东西，但仍然不起作用。如果有人能帮我修改代码或者给我其他建议

这是我的密码：

function App() {
  const [stopwatch, setStopwatch] = useState({
    hour: 0,
    min: 0,
    sec: 0,
    secElapsed: 0,
    minElapsed: 0,
  });

  const [buttonState, setButtonState] = useState({
    start: true,
    stop: false,
    pause: false,
    resume: false,
  });

  var interval = null;

  function onStart() {
    // i want to clear this interval when the onPause function is called
    var clrInt = setInterval(() => {
      setStopwatch(prevValue => {
        prevValue.secElapsed++;
        return {
          hour: Math.floor(prevValue.secElapsed / 3600),
          minElapsed: Math.floor((prevValue.secElapsed + 1) / 60),
          min: prevValue.minElapsed % 60,
          sec: prevValue.secElapsed % 60,
          secElapsed: prevValue.secElapsed,
        };
      });
    }, 1000);

    setButtonState(prevValue => {
      return {
        ...prevValue,
        start: false,
        pause: true,
        stop: true,
      };
    });
    interval = clrInt;
  }

  function onPause() {
    setButtonState(prevValue => {
      return {
        ...prevValue,
        pause: false,
        resume: true,
      };
    });

    // i want to clear the interval in onStart function here
    clearInterval(interval);
  }

  return (
    <div>
      <h1>
        {stopwatch.hour < 10 ? '0' + stopwatch.hour : stopwatch.hour}:
        {stopwatch.min < 10 ? '0' + stopwatch.min : stopwatch.min}:
        {stopwatch.sec < 10 ? '0' + stopwatch.sec : stopwatch.sec}
      </h1>
      {buttonState.start ? <button onClick={onStart}>Start</button> : null}
      {buttonState.pause ? <button onClick={onPause}>Pause</button> : null}
      {buttonState.stop ? <button>Stop</button> : null}
      {buttonState.resume ? <button>Resume</button> : null}
    </div>
  );
}

函数应用程序（）{
常数[秒表，设置秒表]=使用状态({
小时:0，
分:0,，
第0节，
秒：0，
时差:0,，
});
常量[buttonState，setButtonState]=useState({
开始：是的，
停止：错，
暂停：错，
简历：错，
});
var区间=null；
函数onStart（）{
//我想在调用onPause函数时清除此间隔
var clrInt=setInterval（（）=>{
setStopwatch（prevValue=>{
prevValue.secOversed++；
返回{
小时数：数学楼层（prevValue.secpassed/3600），
失效：数学层（（prevValue.seceassed+1）/60），
最小值：prevValue.MineLassed%60，
秒：prevValue.secOversed%60，
秒经过：prevValue.seceassed，
};
});
}, 1000);
setButtonState（prevValue=>{
返回{
…价值，
开始：错，
停顿：是的，
停：是的，
};
});
间隔=clrInt；
}
函数onPause（）{
setButtonState（prevValue=>{
返回{
…价值，
暂停：错，
简历：没错，
};
});
//我想在这里清除onStart函数中的间隔
间隔时间；
}
返回(
{stopwatch.hour<10？'0'+stopwatch.hour:stopwatch.hour}：
{stopwatch.min<10？'0'+stopwatch.min:stopwatch.min}：
{stopwatch.sec<10？'0'+stopwatch.sec:stopwatch.sec}
{buttonState.start？start:null}
{buttonState.pause？pause:null}
{buttonState.stop？stop:null}
{buttonState.resume？resume:null}
);
}

每次呈现组件时，都会在函数组件内声明变量。您需要在useState中捕获间隔，如

var [intervalState, setIntervalState] = useState(null)

...

function onStart() {
   var clearInterval = setInterval(() => {
      ...
   })

   setIntervalState(clearInterval)
}

---

这将确保您的clearInterval值在重新渲染器中保持不变

我认为该间隔不适合组件的状态。相反，我将使用钩子在组件的整个生命周期中保持它

不管怎样，你最好开始用钩子思考：）

一种更简洁的方法是实现以下内容：

这是一个实际实现钩子的演示

const [isRunning, setIsRunning] = useState(true)

useInterval(() => {
    // Your custom logic here
}, isRunning ? 1000 : null)

const onPause = () => {
    // ...
    setIsRunning(false)
}