ReactJS:超出最大更新深度错误

我试图在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>}

发表评论