React :超过最大更新深度
React :超过最大更新深度
提问于 2019-08-06 08:47:25
可能有很多问题可能涉及到这个错误，但是我已经找了很长时间了，似乎找不到适合这个问题的答案--在我把一个道具从一个类传递到另一个类时，似乎有一个无限循环正在创建。我已经确定按钮是绑定的，并且只激活一次，但这似乎没有帮助。
NAVBAR课程：
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>
);
}
}错误信息：
谢谢你抽出时间，如果这个问题以前在一条线上得到了回答，我再次向你道歉。干杯
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-08-06 08:55:53
看起来，您在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});
}
}Stack Overflow用户
发布于 2019-08-06 08:59:42
您可以在setState()中立即调用componentDidUpdate()，但请注意，它必须包装在一个条件中，否则会导致无限循环。因此，解决方案是将该部分包装在一个条件下，或者使用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')
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57372215
复制相关文章
相似问题
腾讯云开发者
