javascript - Reactjs:未捕获错误:尝试更新状态时超出最大更新深度

Question

我正在尝试做一件简单的事情:检查 URL 上是否有参数，然后为我的组件设置状态。该状态将决定是否应显示某些 html 代码。

基本上这个虚拟样本可以让您了解我所拥有的:

class Lalala extends Component {
    constructor(props) {
        super(props);
        this.state = {showStatement : false}

    }
    parseURLParams(urlParams) {
        if (urlParams.indexOf('blabla')> -1) {
          this.setState({
            showStatement: true
          })
        }
    }
    render() {
        const { location } = this.prop
        this.parseURLParams(location.search);
    }
}

所以，正如你所看到的，每次渲染时，它都会调用parseURLParams函数来尝试设置状态，当然，当调用setState时，渲染函数会再次被调用，从而导致无限循环最终在控制台中返回此错误。

你们能告诉我一个更好的方法来设置这个状态吗？一旦这是不依赖于事件的事情，我就有点困惑了。

谢谢

Answer 1

因为您在render中使用了setState。它将是 render -> setState -> render-> setState -> render... 您应该将 this.parseURLParams(location.search); 移动到像这样的其他生命周期

componentWillReceiveProps(nextProps) {
  if(JSON.stringify(nextProps.location) !== JSON.stringify(this.props.location)){
    this.parseURLParams(this.props.location.search);
  }
}