reactjs - 运行 setState prop 函数hang 最大调用堆栈

Question

在我的模板 js 上，我有以下内容

 updateBarTitle(title){
    this.setState({barTItle:title});
 }
 render() {
 const childrenWithProps  = React.Children.map(this.props.children, function (child) {
             var childProps = {
                updateBarTitle: this.updateBarTitle.bind(this)
            };
            var childWithProps = React.cloneElement(child, childProps);
            return childWithProps;
        }, this);

还有我的 child 。

 componentDidUpdate(){
    this.props.updateBarTitle('Users');
 }

测试应用程序时，一旦状态发生变化，我的浏览器就会卡住很长时间，然后返回超出最大调用堆栈大小 需要一些关于我做错了什么的建议。

Answer 1

您正在使用子 componentDidUpdate() 方法创建无限循环。它调用 updateBarTitle()，调用 setState()，重新渲染，再次调用 updateBarTitle()...等等.

如果您希望在 componentDidUpdate() 方法中使用该逻辑，则需要添加一些条件，以便它只调用一次。

您可以将 barTitle 的当前状态作为 Prop 传递给子级，然后执行以下操作:

if(this.props.barTitle !== 'Users') {
  this.props.updateBarTitle('Users');
}

例如，阻止循环发生。

编辑:这里给出一个更清晰的例子是 DEMO以此来说明。