Question

在我的模板上，我有以下

 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);

对我的孩子。

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

在测试应用程序时，一旦状态发生变化，我的浏览器会冻结很长一段时间，然后返回Maximum call stack size exceeded需要一些关于我做错的建议。

Answer 1

您正在使用子componentDidUpdate(）方法创建无限循环。它调用updateBarTitle()，调用setState()，重新呈现，再次调用updateBarTitle() ......依此类推。

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

您可以将barTitle的当前状态作为道具传递给孩子，然后执行以下操作：

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

例如，阻止该循环发生。

编辑：为了给出一个更清晰的例子，可以用DEMO来说明这一点。

运行setState prop函数挂起最大调用堆栈

1 个答案: