在 componentDidMount 中调用函数反应原生

Question

I am trying to call a function upon mounting a component, this function controls some state manipulations. I am not sure I am doing it right. I want the timer to restart once it gets to 20, since there is no button, I am assuming it should be done in the componentDidMount. can someone please point me in the right direction. below is a trimmed down sample code of what I am trying to achieve.

        constructor(props) {
          super(props);
          this.state = { 
            timer: 10,
            timesup: false,
            timing: true,
            showWelcome: true, 
            };
        }

        componentDidMount() {
          this.endTimer();
        this.clockCall = setInterval(() => {
          this.decrementClock();
        }, 1000);
        }

        endTimer = () => {
          if (this.state.timer <= 25) {
                this.setState({
                  timing: true,
                  timer: 30,
                  showWelcome: true,
                  timesup: false,
                })
          }

        }


        decrementClock = () => {  
          this.setState((prevstate) => ({ 
            timer: prevstate.timer-1 
          }), () => {
            if(this.state.timer === 0) {
              clearInterval(this.clockCall)
              this.setState({
                timesup: true,
                timing: false,
                showWelcome: false,
              })
            }
          })
        }


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


        render() {
          return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

        {this.state.timesup && (
            <Text style={{fontSize: 18, color: '#000'}}>
            Time up
            </Text>)}


        {this.state.timing && (
            <Text style={{fontSize: 18, color: '#000'}}>
            {this.state.timer}
            </Text>)}

              {this.state.showWelcome && (
                <Text style={{ fontSize: 20 }}>Welcome</Text>
              )}
            </View> 
          )
        }
        }

Answer 1

I want the timer to restart once it gets to 20, since there is no button, I am assuming it should be done in the componentDidMount .

No, you need to use componentDidUpdate lifecycle method to check timer 's current value. componentDidMount is called only once at the mounting stage.

So, remove this.endTimer(); from componentDidMount .

  componentDidMount() {
    this.clockCall = setInterval(() => {
      this.decrementClock();
    }, 1000);
  }

Then implement componentDidUpdate method like this:

  componentDidUpdate(){
    if(this.state.timer <= 20){
      this.endTimer();
    }
  }

endTimer() like this:

  endTimer = () => {
      this.setState({
        timing: true,
        timer: 30,
        showWelcome: true,
        timesup: false,
      })
  }