清除间隔在react钩子中不起作用
清除间隔在react钩子中不起作用
提问于 2021-01-11 21:37:43
我正在创建一个简单的计时器，当用户点击开始计时器时，计时器开始计时，当用户点击停止计时器时计时器停止。但是clearinterval不起作用，我甚至试过了。
import React, { useEffect, useState } from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
const App = () => {
const [seconds, setSeconds] = useState(0);
const [minutes, setminutes] = useState(0);
const [hour, sethour] = useState(0);
const [start, setStart] = useState(false);
const handleStartBtn = () => {
setStart(!start);
let id;
if (!start) {
id = setInterval(() => setSeconds(sec => sec + 1), 1000);
} else {
clearInterval(id);
}
};
return (
<div className="timer">
<Container>
<Row>
<Col>
<span className="mr-3">hour:-{hour}</span>
<span className="mr-3">minutes:-{minutes}</span>
<span className="mr-3">seconds:-{seconds}</span>
</Col>
</Row>
<Row>
<Button onClick={handleStartBtn}>{!start ? "start" : "stop"}</Button>
</Row>
</Container>
</div>
);
};
export default App;回答 1
Stack Overflow用户
发布于 2021-01-11 21:40:47
唯一一次调用clearInterval时，id是未定义的。(也就是说，它被声明为该函数作用域内的一个变量，但没有为其设置任何值。)您需要存储该id的值，以便以后访问它。因为这是一个React组件，所以state是存储它的合理位置。例如：
const [intervalId, setIntervalId] = useState(0);然后在设置间隔时设置该状态：
setIntervalId(setInterval(() => setSeconds(sec => sec + 1), 1000));然后，当您清除间隔时，您可以使用状态中的ID值：
clearInterval(intervalId);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65667910
复制相关文章
相似问题
腾讯云开发者
