我有這個倒數計時器邏輯，我使用 useEffect 根據來自父組件的傳入道具設定初始狀態，然后當用戶單擊圖示時，設定時間函式被觸發開始倒計時任何想法如何設定條件讓它停下來？該函式運行一次，我不能設定條件形式 setInterval 它自己？
//incoming Rest props 30 60 90 sec / 1,2,3,4,5 min
// When the comopnent gets renderd
useEffect(() => {
const check = rest.includes('Sec');
if (check) {
let secs = parseFloat(rest.slice(0, 2));
setTimer({ ...timer, minutes: secs === 90 ? 1 : 0, seconds: secs === 90 ? 30 : secs });
}
}
// State
const [timer, setTimer] = useState<{ minutes: number; seconds: number }>({ minutes: 0, seconds: 0 });
// On click
const setTime = () => {
setInterval(() => setTimer((prevState) => ({...prevState,
minutes: prevState.minutes, seconds: prevState.seconds - 1 })), 1000);
};uj5u.com熱心網友回復：
首先，useEffect只使用一次和store間隔狀態。
您可以通過停止clearInterval和return null你setState
const [timer, setTimer] = useState(YOUR_DATETIME_VALUE);
const [loop, setLoop] = useState(null);
useEffect(() => {
setTimeout(() => {
setTimer(new Date(timer.getTime() - timer.getMilliseconds()));
setLoop(setInterval( () => {
setTimer(new Date(timer.getTime() - 1000));
}, 1000));
}, timer.getMilliseconds());
}, []);
const stopHandler = () => {
setLoop(interval => {
clearInterval(interval);
return null;
});
}
注意：stopHandler如果你想停止它，請使用
if (Math.abs(new Date().getTime() - timer.getTime) < 1000) {
stopHandler();
}
注意：毫秒差異計算在 setTimeout
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/351495.html