Javascript 无法清除设置间隔

我想在单击停止按钮时清除间隔，似乎clearInterval没有按预期工作。触发handleStop功能或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

---

当需要中断设置间隔时，将设置间隔传递给clearInterval。

每次呈现计时器组件时，变量计时器都会重新声明。因此，setInterval参考被重置

您可以在全局范围内声明计时器，如

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

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

---

或者也可以使用react钩子来维护setInterwal引用。就像我所做的那样，我将setInterval存储在一个名为timer的变量中，然后将timer传递给clearInterval，但它不起作用。请注意，这意味着您只能有一个