Javascript 如何在单击按钮时清除react hook中的间隔

我正在用react钩子构建一个简单的计时器。我有两个按钮启动和复位。 当我点击开始按钮时，handleStart功能工作正常，计时器启动，但我不知道如何在点击重置按钮时重置计时器。 这是我的密码

const App = () => {
  const [timer, setTimer] = useState(0)

  const handleStart = () => {
   let increment = setInterval(() => {
   setTimer((timer) => timer + 1)
  }, 1000)
}

const handleReset = () => {
  clearInterval(increment) // increment is undefined
  setTimer(0)
}

return (
  <div className="App">
    <p>Timer: {timer}</p>
    <button onClick={handleStart}>Start</button>
    <button onClick={handleReset}>Reset</button>
  </div>
);
}

const-App=（）=>{
常量[timer，setTimer]=useState（0）
常量handleStart=（）=>{
让增量=设置间隔（（）=>{
设置计时器（（计时器）=>计时器+1）
}, 1000)
}
常量handleReset=（）=>{
clearInterval（增量）//增量未定义
设置计时器（0）
}
返回(
计时器：{Timer}

开始
重置
);
}

---

为了停止或重置计时器，我需要在clearInterval方法中传递一个属性。增量是在handleStart函数中定义的，所以我无法在handleReset函数中访问它。怎么办？

为什么不直接使用钩子功能

按照您定义的

计时器

状态定义

间隔

状态

const [intervalval, setIntervalval] = useState()

现在，您可以在

handleStart

中设置状态，并在clearinterval中访问修改后的状态

const handleStart = () => {
   let increment = setInterval(() => {
       setTimer((timer) => timer + 1)
   }, 1000);
   setIntervalval(increment);
}


const handleReset = () => {
      clearInterval(intervalval);
      setTimer(0);
}

---

您可以在ref中设置timerId，并在handleReset函数中使用它。目前，您尚未定义增量值，因为您已在handleStart函数中声明了它，因此，如果该变量仅限于此函数，则该变量的scopre也未定义

此外，您不能直接在应用程序组件内部将其定义为变量，因为当应用程序组件重新呈现时，它将被重置。这就是ref派上用场的地方

下面是一个示例实现

const App = () => {
  const [timer, setTimer] = useState(0)
  const increment = useRef(null);
  const handleStart = () => {
   increment.current = setInterval(() => {
   setTimer((timer) => timer + 1)
  }, 1000)
}

const handleReset = () => {
  clearInterval(increment.current);
  setTimer(0);
}

return (
  <div className="App">
    <p>Timer: {timer}</p>
    <button onClick={handleStart}>Start</button>
    <button onClick={handleReset}>Reset</button>
  </div>
);
}

const-App=（）=>{
常量[timer，setTimer]=useState（0）
常量增量=useRef（null）；
常量handleStart=（）=>{
increment.current=setInterval（（）=>{
设置计时器（（计时器）=>计时器+1）
}, 1000)
}
常量handleReset=（）=>{
清除间隔（增量电流）；
设置计时器（0）；
}
返回(
计时器：{Timer}

开始
重置
);
}

是否有任何东西妨碍您对其进行全局定义？