在react.js中使用useEffect钩子更新自动增量计数器值时遇到问题

Question

我有一个自动增量计数器的问题，它每2秒更新一次。它更新值，但在一个小故障的方式，请检查代码和分享您的意见关于这个问题。

const [counter, setCounter] = useState(1200)
function handleCounter() {
setCounter(counter + 1)
}
useEffect(() => {
if (counter => 1200 && counter < 1364) {
setInterval(handleCounter, 2000);
}else {
clearInterval(setInterval(handleCounter, 2000))
}
clearInterval(setInterval(handleCounter, 2000))
}, [counter])

Answer 1

try this

useEffect(() => {
const timeInterval = setInterval(() => {
counter < 1364 && setCounter((prevCount) => prevCount + 1);
}, 2000);
return () => {
clearInterval(timeInterval);
};
}, [counter]);

Answer 2

下面的代码将每2秒执行一次handleCounter函数。这是你想要做的吗?

useEffect(() => {
const intervalID = setInterval(() => handleCounter(), 2000);
return () => {
clearInterval(intervalID);
}
},[]);