无法清除 setInterval

Question

我想在单击停止按钮时清除间隔，似乎clearInterval没有按预期工作。 当handleStop function 被触发或handleReset id 被触发时定时器不会停止

这是我想做的事情：

import React from "react"
import useApp from "../App"
import Interact from "./Interact";

const Timer = () => {
    
    let timer;
    const {millisec , setMillisec , sec , setSec , min , setMin , hr , setHr} = useApp();
    const handleStart = () => {
     timer =  setInterval(() => {
          setMillisec((prev) => {
            if (prev === 100) {
              setSec((prevB) =>{
                if(prevB === 60){
                    setMin(prevC => {
                        if(prevC === 60){
                            setHr(prevD => prevD + 1)
                            return 0
                        } 
                        return prevC + 1
                    })
                    return 0
                }
             return prevB + 1
            });
              return 0;
            }
            return prev + 1;
          });
        }, 10);

       

      };
    const handleStop = () => {
        clearInterval(timer)
    }
    
    const handleReset = () => {
            clearInterval(timer)
        setMillisec(0)
        setSec(0)
        setMin(0)
        setHr(0)
    }

    return(
        <>
            <div className="parent">
                <div className="main">
                    <h1 className="heading">Stop Watch</h1>
                    <div className="timer">
                    <div className ="hour">{hr}</div>
                    <div className ="min">{min}</div>
                    <div className ="sec">{sec}</div>
                    <div className ="millisec">{millisec}</div>
                    </div>
                    <Interact handleStart = {handleStart} 
                              handleStop = {handleStop} 
                              handleReset ={handleReset}
                              />
                </div>
            </div>
           
            
        </>
    )
}
export default Timer

Answer 1

变量timer每次在 Timer 组件渲染时重新声明。 因此，setInterval 引用被重置。

您可以在全局 scope 声明计时器，例如

...
import Interact from "./Interact";

let timer;
const Timer = () => {    
    const {millisec , setMillisec , sec , setSec , min , setMin , hr , setHr} = useApp();
    const handleStart = () => {
...

或者也可以使用 react-hooks 来维护 setInterwal 引用。 像这样

Answer 2

当你需要打破它时，将你的 setInterval() 传递给 clearInterval() 。