setState() not working, Error: Maximum update depth exceeded

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() not working, Error: Maximum update depth exceeded

setState() not working, Error: Maximum update depth exceeded

javascript

setstate

reactjs