如何在单击按钮时清除反应钩子中的间隔 [英] how to clearInterval in react hook on clicking button

问题描述

我正在构建一个带有反应钩子的简单计时器.我有两个按钮启动和重置.当我单击开始按钮时，handleStart 函数工作正常，计时器启动，但我不知道如何在单击重置按钮时重置计时器.这是我的代码

const App = () =>{const [定时器，setTimer] = useState(0)const handleStart = () =>{让增量 = setInterval(() => {setTimer((定时器) => 定时器 + 1)}, 1000)}const handleReset = () =>{clearInterval(increment)//增量未定义设置定时器(0)}返回 (<div className="应用程序"><p>计时器:{timer}</p><button onClick={handleStart}>Start</button><button onClick={handleReset}>重置</button>

);}

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

解决方案

您可以在 ref 中设置 timerId 并在您的 handleReset 函数中使用它.目前，增量值对你来说是未定义的，因为你已经在 handleStart 函数中声明了它，因此如果仅限于这个函数，那么变量的作用域.

此外，您不能直接在 App 组件中将其定义为变量，因为它会在 App 组件重新呈现时重置.这是 ref 派上用场的地方.

下面是一个示例实现

const App = () =>{const [定时器，setTimer] = useState(0)const 增量 = useRef(null);const handleStart = () =>{increment.current = setInterval(() => {setTimer((定时器) => 定时器 + 1)}, 1000)}const handleReset = () =>{清除间隔(增量.当前)；设置定时器(0)；}返回 (<div className="应用程序"><p>计时器:{timer}</p><button onClick={handleStart}>Start</button><button onClick={handleReset}>重置</button>

);}

I am building a simple timer with react hooks. I have two buttons start and reset. handleStart function works fine when I click start button, the timer starts, but I can't figure out how to reset the timer on clicking the reset button. Here is my code

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

In order to stop or reset the timer, I need to pass a property in clearInterval method. increment is defined in handleStart function so I can't access it in handleReset function. What to do?

解决方案

You can set the timerId in ref and use it in your handleReset function. At present, the increment value is undefined for you because you have declared it within the handleStart function and hence hte scopre of the variable if limited to this function.

Also you can't define it directly inside App component as a variable since it will get reset when the App component re-renders. This is where ref comes in handy.

Below is a sample implementation

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

这篇关于如何在单击按钮时清除反应钩子中的间隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！