Question

这是一个简单的代码，我正在尝试使用 setState 状态，但它大喊图像中的错误

我的代码：

    class PageStatus extends Component {
    constructor(props){
        super(props);
        this.state = {
            name: props.name,
            bb: false
        }
    }
    render() {
        const titleName = this.state.name;
        if (titleName === "Home"){

//---------------------------------------------------------
            this.setState({bb : true}); //this is issue
//---------------------------------------------------------

        };
        return (
            <div className="pageTitle">
            <img src="" width="12" height="18" className={this.state.bb ? 'hide' : ''} />
                
            <span className="page-name">{titleName}</span>
        </div>
        );
    }
}

如果我使用 this.state.bb = true 那么它工作正常

Click on this for better understanding

Answer 1

每当您调用 setState 时，它都会调用 render 函数，在您的 render 中，您正在调用 setState，该函数在触发时调用 render再次。这一遍又一遍地重复，因此 Error: Maximum update depth exceeded 将 setState 移到 render 函数之外。使用 Lifecycle methods 或事件处理程序。

尽管在您的情况下，您可以通过删除 setState 并执行以下操作来解决问题

className={this.state.name === "Home" ? 'hide' : ''}

setState() 不起作用，错误：超出最大更新深度

1 个答案: