Javascript React JSX:超出最大更新深度_Javascript_Html_Reactjs_Loops_Jsx

Javascript React JSX:超出最大更新深度

javascript html reactjs loops

Javascript React JSX:超出最大更新深度,javascript,html,reactjs,loops,jsx,Javascript,Html,Reactjs,Loops,Jsx,可能有很多问题可能会涉及到这个错误，但我已经寻找了很长时间，似乎找不到适合这个问题的答案。当我将一个道具从一个类传递到另一个类时，似乎创建了一个无限循环。我已经确定按钮是绑定的，只激活一次，但这似乎没有帮助导航条等级： class Navbar extends React.Component { constructor(props) { super(props) this.state = ({ page: "Home", }); this.Ho

可能有很多问题可能会涉及到这个错误，但我已经寻找了很长时间，似乎找不到适合这个问题的答案。当我将一个道具从一个类传递到另一个类时，似乎创建了一个无限循环。我已经确定按钮是绑定的，只激活一次，但这似乎没有帮助

导航条等级：

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

类导航栏扩展了React.Component{
建造师（道具）{
超级（道具）
此.state=({
页面：“主页”，
});
this.Home=this.Home.bind（this）；
}
主页=（行）=>{
交换机（世界其他地区）{
案例“家”：
this.setState（{page:“Home”}）
打破
案例“附表”：
this.setState（{page:“Schedule”}）
打破
案例“专家”：
this.setState（{page:“Experts”}）
打破
案例“酒店”：
this.setState（{page:“Hotel”}）
打破
“登记册”一案：
this.setState（{page:“Register”}）
打破
案例“审查”：
this.setState（{page:“Reviews”}）
打破
违约：
this.setState（{page:“Home”}）
打破
}
}
render（）{
功能表（e）
{
e、 预防默认值（）；
菜单切换=‘btn活动’；
}
让menuToggle='btn未激活'；
log（“state:+this.state.page”）；
返回(














);
}

}

身体级别：

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

类主体扩展了React.Component{
建造师（道具）
{
超级（道具）；
此.state=({
当前页：“”，
});
}
componentDidUpdate（）{
让page=this.props.page；
交换机（第页）{
案例“家”：
this.setState（{currentPage:}）
打破
案例“附表”：
this.setState（{currentPage:}）
打破
案例“专家”：
this.setState（{currentPage:“专家”}）
打破
案例“酒店”：
this.setState（{currentPage:“Hotel”}）
打破
“登记册”一案：
this.setState（{currentPage:“Register”}）
打破
案例“审查”：
this.setState（{currentPage:“Reviews”}）
打破
违约：
this.setState（{currentPage:“Home”}）
}
}
render（）{
console.log（this.props.page）
返回(
{this.state.currentPage}
);
}
}

错误消息：

谢谢你抽出时间，如果这个问题以前有人用老字眼回答过，我再次表示歉意。干杯

看起来您在

组件diddupdate

中缺少了一个更改道具的检查。尝试添加它：

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"
        })
    }
  }
}

您的

componentdiddupdate

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

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"
        })
    }
  }
}

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

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


为什么参加
时间表

ReactDOM.render(
,
document.getElementById（'root'））
);

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


为什么参加
时间表

ReactDOM.render(
,
document.getElementById（'root'））
);

为什么这样：

this.setState（{currentPage:}）

？能否为错误消息包含快照？它可能会提供一些有关其发生位置的信息。您的

render

函数正在调用

this.Home

，该函数调用

setState

。修改状态时，会导致另一个

渲染。您陷入循环中。请尝试编写另一个函数来处理单击事件。为什么：this.setState（{currentPage:}）
？是否可以为错误消息包含快照？它可能会提供一些有关其发生位置的信息。您的render
函数正在调用this.Home
，该函数调用setState
。修改状态时，会导致另一个渲染。您陷入循环中。请尝试编写另一个函数来处理单击事件。