如何解决为什么状态不会在React功能组件中更新
我正在从事FreeCodeCamp前端库项目-构建Pomodoro时钟。 Link
我已经实现了很多功能。但是有一个主要的错误,我无法理解它是如何引起的。
在Stackblitz处填写代码
根据要求,中断和会话计时器需要在一个接一个的序列中循环运行。当我启动计时器时,它将正确地以会话模式启动计时器,并且在会话计时器结束时,中断计时器将按预期方式启动。
但是,当间隔计时器结束时,会话计时器不会重新启动。休息计时器再次开始。
以下是startTimer方法中的相关代码,该代码在用户事件上调用以启动计时器-
const startTimer = () => {
if (intervalRef.current) return null;
intervalRef.current = setInterval(() => {
setTimerLength(prevTimerLength => {
if (prevTimerLength > 0) return prevTimerLength - 1;
if (isSessionMode) {
setIsSessionMode(false);
return breakLength;
} else {
setIsSessionMode(true);
}
return sessionLength;
});
},1000);
};
我创建了一个状态-isSessionMode
,该状态存储模式的boolean
值-会话或中断,默认为true
。
然后在计时器结束时,我检查了isSessionMode
是否为true
,然后根据breakLength
设置了计时器并设置了isSessionMode
false
。否则,请根据sessionLength
设置计时器,并将isSessionMode
设置为true。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。