无法在 React 中设置未定义的属性“myInterval”

Question

Is anyone able to help me with this error that is appearing when the start timer function is called by a button component? I originally had it set up using componentDidMount so that the timer started on its own, but wanted to eventually implement it into a button click to start

Any other advice on how to clean up them if statements would be greatly appreciated

Cannot set property 'myInterval' of undefined 

class Timer extends React.Component {
  state = {
    seconds: 5,
    stage: "breathIn",
    repetition: 4,
  };

  changeSeconds(x) {
    const { y } = this.state;
    this.setState(({ y }) => ({
      seconds: x,
    }));
  }

  changeStage(x) {
    const { y } = this.state;
    this.setState(({ y }) => ({
      stage: x,
    }));
  }

  changeRepetitions() {
    const { repetition } = this.state;
    this.setState(({ repetition }) => ({
      repetition: repetition - 1,
    }));
  }

  startTimer() {
    this.myInterval = setInterval(() => {
      const { seconds, stage, repetition } = this.state;

      if (seconds > 0) {
        this.setState(({ seconds }) => ({
          seconds: seconds - 1,
        }));
      }

      if (seconds === 0) {
        if (repetition > 0) {
          if (stage === "breathIn") {
            this.changeSeconds(7);
            this.changeStage("hold");
          } else if (stage === "hold") {
            this.changeSeconds(8);
            this.changeStage("breathOut");
          } else if (stage === "breathOut") {
            if (repetition === 2) {
              this.setState(({ repetition }) => ({
                repetition: repetition - 1,
              }));
              this.changeSeconds(5);
              this.changeStage("breathIn");
            } else if (repetition === 1) {
              this.changeSeconds(0);
              this.changeStage("complete");
            }
          }
        } else {
          clearInterval(this.myInterval);
        }
      }
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.myInterval);
  }

  render() {
    const { seconds, stage, repetition } = this.state;
    return (
      <div>
        <Centerbutton startTimer={this.startTimer} />
        <h1>{repetition}</h1>
        <h1>{seconds}</h1>
      </div>
    );
  }
}

export default Timer;

Answer 1

<Centerbutton startTimer={this.startTimer} />

should be either

<Centerbutton startTimer={this.startTimer.bind(this)} />

or

<Centerbutton startTimer={()=>this.startTimer()} />

It's a classic JS event binding problem

Answer 2

Just place your setInterval function inside componentDidMount life cycle method, follow the below example, you can't use the setInterval direct in react.

componentDidMount() {
    this.interval = setInterval(() => {
      // Your code here
    }, 1000);
  }
  
  componentWillUnmount() {
    clearInterval(this.interval);
  }

Learn more about setInterval and Here is the demo app