如何在点击按钮上的反应钩子中清除间隔

Question

我正在构建一个简单的带有反应钩子的计时器。我有两个按钮开始和重置。 当我单击开始按钮时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方法中传递一个属性。 增量是在句柄启动函数中定义的，所以我无法在句柄重置函数中访问它。怎么办？

Answer 1

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

此外，您不能直接在 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>
);
}

Answer 2

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

定义interval状态，就像定义timer状态一样。

const [intervalval, setIntervalval] = useState()

现在，您handleStart设置状态，并在clearinterval中访问修改后的状态。

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

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