如何在React Hook中点击按钮后清除定时器？

Question

我正在使用React Hooks构建一个简单的计时器。我有两个按钮：开始和重置。 当我点击开始按钮时，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>
);
}

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

- user9258981

---

有什么阻止你将其全局定义的东西吗？ - sollniss

Answer 1

您可以在ref中设置timerId，并在handleReset函数中使用它。目前，增量值对您来说未定义，因为您已在handleStart函数内声明了它，因此变量的范围仅限于该函数。

另外，您不能直接在App组件中定义它作为变量，因为当App组件重新渲染时，它将被重置。 这就是引用的方便之处。

以下是一个示例实现。

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

- Shubham Khatri

---

谢谢你，让我的一天变得一样。 - Anil

Answer 2

为什么不直接使用钩子特性呢？定义一个interval状态，就像定义timer状态一样。

const [intervalval, setIntervalval] = useState()

现在你在handleStart中设置状态，在清除间隔时，你将可以访问已修改的状态。

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


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

- Navoneel Talukdar