所以我有这个问题,我不知道这是一个错误的概念还是这个概念的糟糕实现。我用 freecodecamp.org 做了番茄钟,这迫使我从普通的js和 React 组件中使用 setInterval() 函数。
在番茄工作组件内部,每次将其安装在DOM树中时,都应该运行一个 setInterval 检查状态和时钟,具体取决于组件的状态。事实上,我可以看到状态变量的变化(多亏了 React 调试工具),但间隔不起作用
componentdidmount在将组件呈现在DOM树中并检查状态.status之后运行,如果它的真实检查要运行的周期,无论是会话还是中断时钟。一个计时器结束后,另一个计时器应立即开始。
此计时器或间隔存储在组件状态中,然后从 this.state.间隔状态中清除。
class Pomodoro extends React.Component {
constructor(props) {
super(props);
this.state = {
session:1500,
break:300,
cycle:true,
status:false,
sessionClock:1500,
breakClock:300,
interval:0,
}
this.addSessionTime = this.addSessionTime.bind(this);
this.decSessionTime = this.decSessionTime.bind(this);
this.addBreakTime = this.addBreakTime.bind(this);
this.decBreakTime = this.decBreakTime.bind(this);
this.pause = this.pause.bind(this);
this.reset = this.reset.bind(this);
}
/*Avoided all the other binded functions since they are just setStates*/
componentDidMount() {
if (this.state.status)
{
if (this.state.cycle /* cycle true = session */)
{
this.setState({
interval:(setInterval( ()=> {
if (!this.state.status/*status true = clock running*/ ) {clearInterval(this.state.interval);}
else
{/*begin session clock*/
if (this.state.sessionClock > 1 /*check if is the last second*/)
{
this.setState({sessionClock: this.state.sessionClock - 1});
/*take away a second from sessionClock*/
}
else {this.setState({cycle:!this.state.cycle, sessionClock:this.state.session}) }
} /*change cycle and restart sessionclock*/
}
,1000)
)})}
时钟由于将集合间隔保存到组件状态或由于其他原因而无法正常工作?
编辑
添加了一个笔,以便您可以看到实时版本和状态的变化
https://codepen.io/bigclown/pen/bGEpJZb
编辑二
删除了组件didmount方法并将内容移动到 pause() 方法,但现在两个时钟同时运行,时钟运行速度比预期的要快(可能是 react 中的异步状态更新带来了问题?
蛊毒传说
四季花海
相关分类