others - javascript ReactJS: 最大更新深度超过了的错误

我试图切换ReactJS中组件的状态,但得到了一个错误声明:

超过最大更新深度。当组件重复调用 setState inside componentWillUpdate或componentDidUpdate时,会发生这里情况。 React 限制嵌套更新的数量以防止无限循环。

我在代码中没有看到无限循环,谁能帮助我?

ReactJS组件代码:


import React, { Component } from 'react';


import styled from 'styled-components';



class Item extends React.Component {


 constructor(props) {


 super(props); 


 this.toggle= this.toggle.bind(this);


 this.state = {


 details: false


 } 


 } 


 toggle(){


 const currentState = this.state.details;


 this.setState({ details:!currentState }); 


 }



 render() {


 return (


 <tr className="Item"> 


 <td>{this.props.config.server}</td> 


 <td>{this.props.config.verbose}</td> 


 <td>{this.props.config.type}</td>


 <td className={this.state.details?"visible" :"hidden"}>PLACEHOLDER MORE INFO</td>


 {<td><span onClick={this.toggle()}>Details</span></td>}


 </tr>


 )}


}



export default Item;



时间:

因为你在render方法中调用toggle会导致重新渲染和切换,会再次调用并重新渲染,等等

代码中的此行


{<td><span onClick={this.toggle()}>Details</span></td>}



你需要让 onClick 引用 this.toggle 而不是调用它

解决这个问题可以这样做


{<td><span onClick={this.toggle}>Details</span></td>}



在调用函数时,应传递事件对象:


{<td><span onClick={(e) => this.toggle(e)}>Details</span></td>}



如果你不需要处理 onclick 事件,也可以键入:


{<td><span onClick={(e) => this.toggle()}>Details</span></td>}



现在你还可以在函数中添加参数。

如果不需要将参数传递给函数,只需从以下函数中删除( ):


<td><span onClick={this.toggle}>Details</span></td>



但是,如果要传递参数,则应如下所示:


<td><span onClick={(e) => this.toggle(e,arg1,arg2)}>Details</span></td>



...