创建倒数计时器时遇到问题，该计时器应在最后一个计时器结束时启动一个新计时器（包括小吃链接！）

因此，我正在尝试创建一个允许用户执行以下操作的计时器：开始，暂停和继续。

此外，我希望计时器启动并运行10分钟，一旦完成，请重置并运行5分钟，然后再重置并运行10分钟，然后停止。

我的代码存在的问题是，在满足我要查找的条件时，clearInterval(interval)并未按预期停止计时器。正在访问代码块，并且控制台正在运行中登录，但是我的计时器将继续运行，甚至会使分钟数变为负数：（

这是snack和代码：

import React,{ useState,useEffect } from 'react';
import { View,Text } from 'native-base';
const Timer = ({ timerStarted,toggleTimer }) => {
const [minutes,handleMinutes] = useState('10');
const [seconds,handleSeconds] = useState('00');
const [secondsLeft,handleSecondsLeft] = useState();
const [timerType,handleTimerType] = useState('1st'); // 2nd,3rd
console.log('timer type',timerType);
useEffect(() => {
let interval = null;
const timerEnded = minutes === '00' && secOnds=== '00';
console.log('useEffect Upper Level',minutes,seconds);
if (timerStarted && !timerEnded) {
console.log('timer starting',seconds);
interval = setInterval(() => {
decrementClock();
},100);
}
if (timerEnded && timerType === '3rd') {
clearInterval(interval);
// toggleTimer()
console.log('DONE');
}
if (timerEnded && timerType === '2nd') {
clearInterval(interval);
handleMinutes('10');
// toggleTimer();
console.log('interval?',interval);
handleTimerType('3rd');
console.log('SECOND CONDITION');
}
if (timerEnded && timerType === '1st') {
console.log('FIRST CONDITION');
console.log('interval?',interval);
clearInterval(interval);
handleMinutes('05');
// toggleTimer();
handleTimerType('2nd');
}
if (!timerStarted) {
console.log('paused?');
clearInterval(interval);
}
return () => clearInterval(interval);
},[timerStarted,seconds,secondsLeft,timerType]);
useEffect(() => {
let result = minutes * 60 + parseInt(seconds);
timerStarted && handleSecondsLeft(result);
},[timerStarted]);
const decrementClock = () => {
let min = Math.floor(secondsLeft / 60);
let sec = secondsLeft - min * 60;
if (min <10) {
min = '0' + min;
}
if (sec <10) {
sec = '0' + sec;
}
handleMinutes(min);
handleSeconds(sec);
handleSecondsLeft(secOndsLeft=> secondsLeft - 1);
};
return (


{minutes}:{seconds}


);
};
const TimerScreen = () => {
const [timerStarted,handleTimerStarted] = useState(false);
const toggleTimer = () => {
handleTimerStarted(!timerStarted);
};


;
};


useEffect(() => {
},[timerStarted,seconds,minutes,secondsLeft,timerType]);


每次更新timerStarted,timerType时，都会触发上述代码。我认为这不好，因为它会影响您的间隔时间。您应该将计时器分开。

您可以在本教程https://overreacted.io/making-setinterval-declarative-with-react-hooks/中使用useInterval钩子

useInterval(() => {
decrementClock();
},timerStarted ? 1000 : null); // If timerStarted,run interval. Otherwise,reset it