我试图在ReactJS中切换组件的状态,但出现一个错误,说明:
超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时,可能会发生这种情况。React限制嵌套更新的数量以防止无限循环
我在代码中没有看到无限循环,有人能帮忙吗
组件代码:
导入React,{Component}来自“React”;
从“样式化组件”导入样式化;
类项扩展了React.Component{
建造师(道具){
超级(道具);
this.toggle=this.toggle.bind(this);
此.state={
详情:错
}
}
切换(){
const currentState=this.state.details;
this.setState({details:!currentState});
}
render(){
返回(
<;tr className=“项目”>;
<;td>;{this.props.config.server}<;/td>;
<;td>;{this.props.config.verbose}<;/td>;
<;td>;{this.props.config.type}<;/td>;
<;td className={this.state.details?“可见”:“隐藏”}>;占位符更多信息<;/td>;
{<;td>;<;span onClick={this.toggle()}>;详细信息<;/span>;<;/td>;}
<;/tr>;
)}
}
导出默认项;
这是因为在render方法中调用toggle会导致重新渲染,而toggle会再次调用并重新渲染,依此类推
这一行是你的代码
{<;td>;<;span onClick={this.toggle()}>;详细信息<;/span>;<;/td>;}
您需要使onClick参考this.toggle不调用它
要解决此问题,请执行以下操作
{<;td>;<;span onClick={this.toggle}>;详细信息<;/span>;<;/td>;}