Javascript 在componentDidMount react native中调用函数

我试图在安装组件时调用一个函数，这个函数控制一些状态操作。我不确定我是否做对了。我希望计时器在达到20后重新启动，因为没有按钮，我假设应该在componentDidMount中完成。谁能给我指一下正确的方向吗。下面是我试图实现的精简示例代码

        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> 
          )
        }
        }

构造函数（道具）{
超级（道具）；
this.state={
计时器：10，
timesup:false，
时间：对，
欢迎光临，
};
}
componentDidMount（）{
这个.endTimer（）；
this.clockCall=setInterval（（）=>{
这个.DecrementLock（）；
}, 1000);
}
结束计时器=（）=>{
如果（this.state.timer{
this.setState（（prevstate）=>（{
计时器：prevstate.timer-1
}), () => {
if（this.state.timer==0）{
clearInterval（此.clockCall）
这是我的国家({
timesup：是的，
时间：错，
欢迎光临：错，
})
}
})
}
组件将卸载（）{
clearInterval（这个.clockCall）；
}
render（）{
返回(
{this.state.timesup&&(
时间到了
)}
{this.state.time&&(
{this.state.timer}
)}
{this.state.showWelcome&&(
欢迎
)}
)
}
}

我希望计时器在达到20后重新启动，因为没有 按钮，我假设它应该在组件didmount中完成

否，您需要使用

componentdiddupdate

生命周期方法来检查

timer

的当前值。

componentDidMount

在装载阶段仅调用一次

因此，从

componentDidMount

中删除

this.endTimer（）；

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

然后执行如下

componentDidUpdate

方法：

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

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

---

您在这里遇到了什么问题？我想在计时器达到25时重置计时器发生了什么事？为什么您不接受我的答案？@Vincento抱歉，我应该早点回答，但我的系统出了问题，我想指出，当我在componentDidUpdate中只保留计时器状态时，代码可以工作，但是，当我在componentDidUpdate，我收到一个“超过最大更新深度”错误。当组件重复调用componentWillUpdate或componentDidUpdate中的setState时，可能会发生这种情况。如果要更新

componentDidUpdate

中的状态，必须使用条件将其包装。否则，您将得到

最大深度

错误。这是错误的“与我的答案无关，但不管怎样，”文肯托补充道，“我现在就把它修好了。”