箭头 function 存储在 State

Question

So i have this problem, which i don't know if it's a concept wrongly had or a bad implementation of that concept. Im doing the pomodoro clock in freecodecamp.org which forces me to use setInterval() function from plain js and in a React component.

Inside the Pomodoro component, every time it gets mounted in the DOM tree should run a setInterval checking for the state and clocking depending on the state of the component. In fact, i can see the state variables change (thanks to the React Debugging tool) but the interval not working

componentdidmount runs after having the component rendered inside the DOM tree and checks the state.status, if its true checks what cycle to run, whether if its the session or break clock.After one timer ends, the other should start immediately.

This timer or interval is stored in the component state and then cleared from the this.state.interval 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)
      )})}

else /*cycle off = break time*/

{

  this.setState({interval: setInterval(()=>{
if (!this.state.status) {clearInterval(this.state.interval)}
    else {
      /*begin break clock*/
          if (this.state.breakClock > 1) 
            {this.setState({breakClock:this.state.breakClock - 1})}
              else {this.setState({cycle:!this.state.cycle, breakClock:this.state.break})}        


          }

},1000)})

}
} 

else  { clearInterval(this.state.interval)}


}  

the clock isn't working due saving the setInterval into the Component state or its due something else?

EDIT

Added a codepen so you can see the live version and states changing

https://codepen.io/bigclown/pen/bGEpJZb

EDIT II

Erased the componentdidmount method and moved the content to pause() method but now both clocks run at the same time and clocks run faster than intended (might be problem coming from the async state updates in react?)

Answer 1

The issue is your usage of componentDidMount . It is invoked when the Component is mounted, which means it is invoked before the user can interact with the screen.

Your check

if (this.state.status) 

Will never be true, as your state sets status to false. Looking at your code, I assume you meant that the Pause Button to toggle status to be true, and you felt that the code within componentDidMount would run.

---

What you should do however, is move your code into the pause() function, as this is actually the trigger for your clock.

From there you can do something similar to:

  pause() {
    if (this.state.status === false) {
       // Start your clock, whilst checking `cycle`
    } else {
       clearInterval(this.state.interval);
    }
  }

Here is a codepen, where I have refactored your code, but basically moved all the logic into Pause . https://codepen.io/stephenyu-the-encoder/pen/zYrqQYE

I've changed all the clocks to start at 5 seconds so it's faster to see it working.

Answer 2

I suspect the problem with your clocks running at the same time and the timer being off is a result of not stopping the old timer before kicking off the new one.

What you might be looking for is the componentDidUpdate method. This method lets you compare your last state to your current state, and make changes accordingly. Using that method, you can check when we switch from break time to session time, and then stop the old timer to kick off the new one like so:

  componentDidUpdate(prevProps, prevState) {
    // We need to check that the new state is different from the old state
    // if it is, stop the old timer, and kick off the new one
    if (prevState.cycle !== this.state.cycle) {
      clearInterval(this.state.interval);
      if (this.state.cycle) {
        // If the cycle switched to session, start the session timer
        this.startSession();
      } else {
        // If the cycle switched to break, start the break timer
        this.startBreak();
      }
    }
  }

This way, as long as when your session or break timer reaches 0 you toggle this.state.cycle , you'll always be kicking off the new timer.

Check out my new codepen here for fully functional code