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

我试着做一件简单的事情： 检查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时，会再次调用渲染函数，导致无限循环，最终在控制台中返回此错误

你们能告诉我一个更好的方法来设定这个状态吗？一旦这不取决于事件，我就有点困惑了

---

感谢您在

渲染
中使用setState。它将是渲染->设置状态->渲染->设置状态->渲染。。。您应该移动
this.parseurlparms（location.search）到其他类似的生命周期

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

因为您在
渲染中使用了setState。它将是渲染->设置状态->渲染->设置状态->渲染。。。您应该移动
this.parseurlparms（location.search）到其他类似的生命周期

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

尝试在不同的生命周期挂钩中设置状态，如
componentdiddupdate
。此外，如果初始渲染时所需的道具值可用，则还需要将其设置为状态：

class Lalala extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showStatement : false,
            showBrokerStatements: props.location && props.location.search && props.location.search.indexOf('blabla')> -1
        }
    }
    componentDidUpdate() {
        this.parseURLParams(this.props.location.search);
    }
    parseURLParams(urlParams) {
        if (urlParams.indexOf('blabla')> -1) {
          this.setState({
            showBrokerStatements: true
          })
        }
    }
    render() {
        const { location } = this.prop
    }
}

尝试在不同的生命周期挂钩中设置状态，如
componentdiddupdate
。此外，如果初始渲染时所需的道具值可用，则还需要将其设置为状态：

class Lalala extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showStatement : false,
            showBrokerStatements: props.location && props.location.search && props.location.search.indexOf('blabla')> -1
        }
    }
    componentDidUpdate() {
        this.parseURLParams(this.props.location.search);
    }
    parseURLParams(urlParams) {
        if (urlParams.indexOf('blabla')> -1) {
          this.setState({
            showBrokerStatements: true
          })
        }
    }
    render() {
        const { location } = this.prop
    }
}

您已经创建了一个无限循环——您不允许在
render
方法中
setState
，但通过调用一个设置状态的函数可以有效地实现这一点。只有少数react生命周期挂钩的状态设置没有问题。请查看-，您可能需要类似于
componentdiddupdate
的内容。您应该看看是什么负责将道具从当前位置传递到为该路由定义的组件。@trixn我正在使用react路由器获取url参数已经。。然后我解析它以检查特定的参数，如果它在那里，我需要更改状态。。问题来了，你不需要自己解析url参数。如果您正确定义了路由，react router可以为您做到这一点。参数将在传递给组件的
match
属性中。您已经创建了一个无限循环-
render
方法中不允许
setState
，但通过调用一个设置状态的函数，您可以有效地做到这一点。只有少数react生命周期挂钩的状态设置没有问题。请查看-，您可能需要类似于
componentdiddupdate
的内容。您应该看看是什么负责将道具从当前位置传递到为该路由定义的组件。@trixn我正在使用react路由器获取url参数已经。。然后我解析它以检查特定的参数，如果它在那里，我需要更改状态。。问题来了，你不需要自己解析url参数。如果您正确定义了路由，react router可以为您做到这一点。参数将在传递给组件的
匹配
属性中。执行此操作时，它似乎没有运行parseurlparms函数。。我添加了一些console.log，但没有添加任何内容happens@Periback初始渲染时，
props
上的
location
是否可用？如果是这样，您也应该在构造函数中设置它。我会更新我的答案以反映这一点。虽然我已经接受了江的答案，但我现在也尝试了你的答案，它也会起作用！谢谢你，伙计！执行此操作时，似乎没有运行parseURLParams函数。。我添加了一些console.log，但没有添加任何内容happens@Periback初始渲染时，
props
上的
location
是否可用？如果是这样，您也应该在构造函数中设置它。我会更新我的答案以反映这一点。虽然我已经接受了江的答案，但我现在也尝试了你的答案，它也会起作用！谢谢你，伙计！如果重新加载
../blabla
页面，这将不起作用，因为
组件将接收道具
不会发射。Ya。只需添加
组件willmount
并放置
this.parseURLParams（this.props.location.search）
，这正是为什么使用包装器组件更不容易出错的原因。如果重新加载
../blablablabla
页面，这将不起作用，因为
组件willreceiveprops
不会触发.Ya。只需添加
组件willmount
并放置
this.parseurlparms（this.props.location.search）
，这正是使用包装器组件不易出错的原因。。