Javascript 反应本机倒计时计时器导致不变冲突

如前所述，我试图为我的项目创建一个倒计时计时器，如下所示

constructor(props: Object) {
  super(props);
  this.state ={ timer: 3,hideTimer:false}
}

componentDidMount(){
  this.interval = setInterval(
    () => this.setState({timer: --this.state.timer}),
    1000
  );
}

componentDidUpdate(){
  if(this.state.timer === 0){
    clearInterval(this.interval);
    this.setState({hideTimer:true})        
  }
}

render() { 
  return (
    <View style={{ flex: 1, justifyContent: 'center', }}>
      <Text> {this.state.timer} </Text>
    </View>
 )
}

由于我只想在

componentDidMount

当且仅当时间等于0时获取状态，我不理解为什么会出现上述错误，因为代码只执行一次，并且在状态设置之后，时间间隔也会被清除

---

有人能解释一下我做错了什么吗？谢谢。

您的问题的答案是错误本身的描述。它说：

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

这意味着您不应该在

componentdiddupdate

hook中更新状态

如果您只是从

componentdiddupdate（）

中删除

this.setState（{hideTimer:true}）

，应该可以正常工作

---

问题的答案是错误本身的描述。它说：

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

这意味着您不应该在

componentdiddupdate

hook中更新状态

如果您只是从

componentdiddupdate（）

中删除

this.setState（{hideTimer:true}）

，应该可以正常工作

---

问题在于您的

组件diddupdate

逻辑：

componentDidUpdate(){
  if(this.state.timer === 0){
    clearInterval(this.interval);
    this.setState({hideTimer:true})        
  }

当您调用

this.setState（{hideTime:true}）时，

您的

componentdiddupdate

逻辑将被重新访问，并且由于

此.state.timer

此时将为0，因为您尚未重新启动计时器（

componentDidMount

仅在初始渲染后调用一次，而不是在更新时）

不完全确定你想完成什么，你在做什么，但这个改变应该会有所帮助

componentDidUpdate(){
  if(this.state.timer === 0 && !this.state.hideTimer){
    clearInterval(this.interval);
    this.setState({hideTimer:true})        
  }

---

因此，通过设置

hideTime:true

，然后对照该值进行检查，可以防止无限setState循环。如果这个检查对你想要完成的事情不起作用，那么你将不得不使用不同的逻辑，但希望你能得到这个想法

问题在于您的

组件diddupdate

逻辑：

componentDidUpdate(){
  if(this.state.timer === 0){
    clearInterval(this.interval);
    this.setState({hideTimer:true})        
  }

当您调用

this.setState（{hideTime:true}）时，

您的

componentdiddupdate

逻辑将被重新访问，并且由于

此.state.timer

此时将为0，因为您尚未重新启动计时器（

componentDidMount

仅在初始渲染后调用一次，而不是在更新时）

不完全确定你想完成什么，你在做什么，但这个改变应该会有所帮助

componentDidUpdate(){
  if(this.state.timer === 0 && !this.state.hideTimer){
    clearInterval(this.interval);
    this.setState({hideTimer:true})        
  }

---

因此，通过设置

hideTime:true

，然后对照该值进行检查，可以防止无限setState循环。如果这个检查对你想要完成的事情不起作用，那么你将不得不使用不同的逻辑，但希望你能得到这个想法

您可以在

componentdiddupdate

方法中更新状态，但您必须意识到，如果您这样做，该方法将再次被调用，因此您需要有适当的逻辑来防止它将状态设置为对设置状态的响应，因为这将导致无限循环，您可以在

componentdiddupdate

方法中更新状态，但是您必须意识到，如果您这样做，该方法将再次被调用，因此您需要有适当的逻辑来防止它将state设置为对setting state的响应，因为这将导致无限循环。只是一个旁注，您永远不应该做类似于

--this.state.time

，因为它会直接改变状态。在您的情况下，您应该执行

timer:this.state.timer-1

。只是一个旁注，您永远不应该执行类似

--this.state.time

的操作，因为它会直接在状态中发生变异。在您的情况下，应该执行

timer:this.state.timer-1

。