在React中使用setState时，clearInterval无法停止setInterval
在React中使用setState时，clearInterval无法停止setInterval
提问于 2020-09-30 20:25:27
const handleClick = () => {
setState({ ...state, on: !state.on });
let tog = state.on;
console.log("first" + tog);
const interval = setInterval(() => {
if (tog) {
console.log(tog);
} else clearInterval(interval);
}, 1000);
};enter image description here这个变量即使是false也不能停止；但是如果我不使用状态，改变到一个变量就不会发生，这对我来说太奇怪了，我需要一些帮助；
let flag = true;
const handleClick = () => {
flag = !flag;
console.log("first" + flag);
const interval = setInterval(()=>{
if(flag){
console.log(flag);
}else(clearInterval(interval))
},1000)
};回答 2
Stack Overflow用户
回答已采纳
发布于 2020-09-30 20:30:50
React将在每次重新渲染时创建新的handleClick，并且会有不同的setIntervals，
const intvl = useRef(null);
const handleClick = () => {
intvl.current = setInterval(() => { //now interval is not changing on every fn recreation
.....
clearInterval(intvl.current);
}Stack Overflow用户
发布于 2020-09-30 21:46:40
您应该使用Effect来处理间隔，如下所示：
useEffect(() => {
let intervalId
if (state.on) {
intervalId = setInterval(() => {
console.log(state.on)
}, 1000)
return () => clearInterval(intervalId)
}
}, [state.on])
const handleClick = () => {
setState({ ...state, on: !state.on });
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64137536
复制相关文章
相似问题
腾讯云开发者
