React JSX：超过最大更新深度答案

【问题标题】：React JSX: Maximum update depth exceededReact JSX：超过最大更新深度
【发布时间】：2019-12-13 18:45:04
【问题描述】：

可能有很多问题可能涵盖此错误，但我已经寻找了很长时间，似乎无法找到适合此问题的答案当我通过一个道具时似乎正在创建一个无限循环从课堂到另一个。我已确保按钮已绑定并且仅激活一次，但这似乎没有帮助。

导航栏类：

class Navbar extends React.Component {
constructor(props) {
    super(props)
    this.state = ({
        page: "Home",

    });
    this.Home = this.Home.bind(this);
}
 Home = (row) => {
        switch(row ){
        case "Home":
            this.setState({page: "Home"}) 
            break;
        case "Schedule":
            this.setState({page: "Schedule"}) 
            break;
        case "Experts":
            this.setState({page: "Experts"}) 
            break;
        case "Hotel":
            this.setState({page: "Hotel"}) 
            break;
        case "Register":
            this.setState({page: "Register"}) 
            break;
        case "Reviews":
            this.setState({page: "Reviews"}) 
            break;
        default: 
            this.setState({page: "Home"}) 
            break;
        }
    }

render() {

    function HamMenu(e)
        {
            e.preventDefault();
            menuToggle = 'btn active';
        }
    let menuToggle = 'btn not-active';
    console.log("state: " + this.state.page);
    return(
        <div>
        <nav className="navbar fixed-top navbar-default navbar-light bg-light">
            <div className="container">
                <img className="navbar-logo" src="https://southbankresearch.com/wp-content/uploads/sites/9/2019/08/stickyLogo-min.png" width="200px"/>
                <ul className="nav navbar-nav">
                    <li><a href="#" onClick={() => this.Home("Home")}>WHY ATTEND?</a>
                    </li>
                    <li><a href="#" onClick={() => this.Home("Schedule")} >SCHEDULE</a>
                    </li>
                    <li><a href="#" onClick={() => this.Home("Experts")}>EXPERTS</a>
                    </li>
                    <li><a href="#" onClick={() => this.Home("Hotel")}>HOTEL</a>
                    </li>
                    <li><a href="#" onClick={() => this.Home("Register")}>REGISTER</a>
                    </li>
                    <li><a href="#" onClick={() => this.Home("Reviews")}>REVIEWS</a>
                    </li>
                </ul>

                 <div className="box">
                    <div onClick={HamMenu} className={menuToggle}>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>


            </div>
        </nav>
        <Body page={this.state.page}/>
        </div>
    );
}

}

身体等级：

class Body extends React.Component {
constructor(props)
{
    super(props);
    this.state = ({
        currentPage: "",

    });
}
componentDidUpdate() {
    let page = this.props.page;
    switch(page ){
        case "Home":
            this.setState({currentPage: <Home/>}) 
            break;
        case "Schedule":
            this.setState({currentPage: <Schedule/>}) 
            break;
        case "Experts":
            this.setState({currentPage: "Experts"}) 
            break;
        case "Hotel":
            this.setState({currentPage: "Hotel"}) 
            break;
        case "Register":
            this.setState({currentPage: "Register"}) 
            break;
        case "Reviews":
            this.setState({currentPage: "Reviews"}) 
            break;
        default: 
            this.setState({currentPage: "Home"}) 
        }
}

render() {
    console.log(this.props.page)
    return(
        <div>
            {this.state.currentPage}
        </div>
        );
    }
}

错误信息：

感谢您抽出宝贵时间，如果这个问题之前已在旧帖子中回答，我再次道歉。干杯

【问题讨论】：

为什么：this.setState({currentPage: <Home/>})?
您能否包含错误消息的快照？它可能会提供一些关于它发生在哪里的信息。
您的render 函数正在调用this.Home，它调用setState。当您修改状态时，它会导致另一个render。你陷入了一个循环。
尝试编写另一个函数来处理点击事件。

标签： javascript html reactjs loops jsx

【解决方案1】：

您的componentDidUpdate 中似乎缺少对已更改道具的检查。尝试添加它：

componentDidUpdate(prevProps) {
  let page = this.props.page;
  if (prevProps.page !== page) {
    switch (page) {
      case "Home":
        this.setState({
          currentPage: < Home / >
        })
        break;
      case "Schedule":
        this.setState({
          currentPage: < Schedule / >
        })
        break;
      case "Experts":
        this.setState({
          currentPage: "Experts"
        })
        break;
      case "Hotel":
        this.setState({
          currentPage: "Hotel"
        })
        break;
      case "Register":
        this.setState({
          currentPage: "Register"
        })
        break;
      case "Reviews":
        this.setState({
          currentPage: "Reviews"
        })
        break;
      default:
        this.setState({
          currentPage: "Home"
        })
    }
  }
}

为了让你的方法更加干爽，你可以只调用一次this.setState：

componentDidUpdate(prevProps) {
  let page = this.props.page;
  if (prevProps.page !== page) {
    let currentPage;
    switch (page) {
      case "Home":
        currentPage = < Home / >
        break;
      case "Schedule":
        currentPage = < Schedule / >
        break;
      case "Experts":
        currentPage = "Experts"
        break;
      case "Hotel":
        currentPage = "Hotel"
        break;
      case "Register":
        currentPage = "Register"
        break;
      case "Reviews":
        currentPage = "Reviews"
        break;
      default:
        currentPage = "Home"
    }
    this.setState({currentPage});
  }
}

【讨论】：

【解决方案2】：

您可以在 componentDidUpdate() 中立即调用 setState()，但请注意它必须包含在条件中，否则会导致无限循环。因此，解决方案是将该部分包装在条件中或使用 React-Router 库进行反应路由，如下所示。

<ul className="nav navbar-nav">
   <li><Link to="/Home">WHY ATTEND?</li>
   <li><Link to="/Scheudle">SCHEDULE</li>
</ul>

ReactDOM.render(
  <Router history={browserHistory}>  
    <Route path="/Home" component={Home} />
    <Route path="/Schedule" component={Schudule} />
  </Router>,
  document.getElementById('root')
);

【讨论】：