【react】报错:Maximum update depth exceeded

1,779 阅读1分钟

image.png

出现此问题的原因是超出了最大更新深度,react循环执行50次setState会报这个错误,多是因为在componentDidUpdate钩子中更新了state导致,比如如下代码:
 componentDidUpdate(prevProps) {
    if (this.props.show) {
      this.setState({ screenMove: Css["move"] });
    } else  {
      this.setState({ screenMove: Css["unmove"] });
    }
  }

这段代码的本意是为组件显示和隐藏增加动画,结果却导致了死循环。在componentDidUpdate中设置state,state变化再次调用componentDidUpdate。所以需要增加结束条件,查找componentDidUpdate文档为:

componentDidUpdate(prevProps, prevState, snapshot)

该钩子的参数为数据更新前的数据,所以通过比对当前数据与更新前的数据,做相应的操作,如下:

componentDidUpdate(prevProps) {
  if(prevProps.show===this.props.show){
    return false
  }
  if (this.props.show) {
    this.setState({ screenMove: Css["move"] });
  } else  {
    this.setState({ screenMove: Css["unmove"] });
  }
}

报错没了