我實作了一個可以正常作業的計時器，但唯一的問題是計時器結束時它不會 clearInterval 。
我的代碼如下所示：
const [currentCount, setCurrentCount] = React.useState(10);
const [intervalId, setIntervalId] = React.useState(10);
React.useEffect(() => {
const intervalId = setInterval(timer, 1000);
// store intervalId in the state so it can be accessed later:
setIntervalId(intervalId);
return () => {
clearInterval(intervalId);
};
}, []);
const timer = () => {
setCurrentCount((prev) => {
if (prev > 0) {
return prev - 1;
} else if (prev === 0) {
console.log("Still Runs");
clearInterval(intervalId);
return prev;
}
});
};
currentCount 的值從 10 減少到 0 但我想在它達到 0 時清除間隔，我試圖用這段代碼清除它clearInterval(intervalId)但沒有用。
當 currentCount 的值達到 0 時，如何清除Interval？
uj5u.com熱心網友回復：
您的useEffect鉤子在其依賴項陣列中缺少一個重要的依賴項：timer。為了讓事情變得更簡單，您可以將timer變數移動到效果內部（除非您有充分的理由將其放在外部）。這最終timer會帶來額外的好處，即該函式將能夠參考間隔 ID，而無需將其保持在狀態。
const [currentCount, setCurrentCount] = React.useState(10);
React.useEffect(() => {
const timer = () => {
setCurrentCount((prev) => {
if (prev > 0) {
return prev - 1;
} else if (prev === 0) {
console.log("Still Runs");
clearInterval(intervalId);
return prev;
}
});
};
const intervalId = setInterval(timer, 1000);
return () => {
clearInterval(intervalId);
};
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/360908.html
標籤：javascript 反应 设置间隔 清除间隔
上一篇：Sails.js如何通過vuejs添加src/href
下一篇：字串化json的正則運算式