Reactjs 创建倒计时计时器时出现问题，应在最后一个计时器结束时启动新计时器（包括零食链接！）

所以我尝试创建一个计时器，允许用户：启动、暂停和恢复

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

我的代码的问题是，当满足我要查找的条件时，

clearInterval（interval）

没有按预期停止计时器。正在访问代码块，并且运行中的控制台日志，但我的计时器将继续运行，甚至让分钟数变为负数：(

以下是密码和代码：

import React，{useState，useffect}来自“React”；
从'native base'导入{View，Text}；
常量计时器=（{timerStarted，toggleTimer}）=>{
常数[分钟，handleMinutes]=使用状态（'10'）；
const[seconds，handleSeconds]=useState（'00'）；
const[secondsLeft，handleSecondsLeft]=useState（）；
常量[timerType，handleTimerType]=useState（'1st'）；//第二，第三
log（'timer type'，timer type）；
useffect（（）=>{
设区间=null；
const timerEnded=minutes=='00'和&seconds=='00'；
console.log（'useffect上层'，分，秒）；
if（timerStarted&&！timerEnded）{
console.log（'计时器启动'，分，秒）；
间隔=设置间隔（（）=>{
递减锁（）；
}, 100);
}
if（timerEnded&&timerType==='3rd'）{
间隔时间；
//切换计时器（）
console.log（'DONE'）；
}
if（timerEnded&&timerType==='2nd'）{
间隔时间；
手分钟（'10'）；
//切换定时器（）；
console.log（'interval'，interval）；
handleTimerType（'3rd'）；
console.log（“第二个条件”）；
}
if（timerEnded&&timerType==='1st'）{
console.log（“第一个条件”）；
console.log（'interval'，interval）；
间隔时间；
手分钟（'05'）；
//切换定时器（）；
handleTimerType（“第二”）；
}
如果（！timerStarted）{
console.log（'暂停？'）；
间隔时间；
}
return（）=>clearInterval（interval）；
}，[timerStarted，seconds，minutes，secondsLeft，timerType]；
useffect（（）=>{
让结果=分钟*60+parseInt（秒）；
timerStarted&&HandleSecondLeft（结果）；
}，[timerStarted]）；
常数递减锁=（）=>{
设最小值=数学楼层（秒英尺/60）；
设sec=secondsLeft-min*60；
如果（最小值<10）{
最小值='0'+最小值；
}
如果（第10节）{
秒='0'+秒；
}
手分钟（分钟）；
毫微秒（秒）；
handleSecondsLeft（secondsLeft=>secondsLeft-1）；
};
返回(
{分钟}：{秒}
);
};
常量时间屏幕=（）=>{
常量[timerStarted，handleTimerStarted]=useState（false）；
常量切换计时器=（）=>{
handleTimerStarted（！timerStarted）；
};
;
};

每当

timerStarted、seconds、minutes、secondsLeft、timerType

更新时，都会触发上述代码。我认为这不好，因为它会影响您的时间间隔。您应该将计时器分离出来

您可以在本教程中使用

useInterval

挂钩

---

谢谢！我能够修复它并让它正常工作，但是你链接的教程也应该修复我遇到的延迟问题。我会开始的。谢谢！

useEffect(() => {

}, [timerStarted, seconds, minutes, secondsLeft, timerType]);

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