我试图在ReactJS中切换组件的状态，但我得到一个错误说明:
超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用setState时，就会发生这种情况。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;
先忘掉react:
这与react无关，让我们了解Java Script的基本概念。例如，您已经在java脚本中编写了以下函数(名称为A)。
function a() {
};
问题1)如何调用我们已经定义的函数?
答:一个();
问题2)如何传递函数的引用，以便稍后调用它?
答:让乐趣= a;
现在回到你的问题，你已经使用了函数名的paranthesis，这意味着当下面的语句将被渲染时，函数将被调用。
< td > < span onClick = {this.toggle()} >细节< / span > < / td >
那么如何改正呢?
简单! !只要去掉括号。通过这种方式，您已经将该函数的引用提供给onClick事件。它只在单击组件时才会回调函数。
<td><span onClick={this.toggle}>Details</span></td>
一个与反应相关的建议:
避免使用有人在回答中建议的内联函数，这可能会导致性能问题。
避免下面的代码，它将在函数被调用时一次又一次地创建同一个函数的实例(lamda语句每次都会创建新实例)。
注意:并且不需要显式地将事件(e)传递给函数。你可以在函数中访问它而不传递它。
{< td > < span onClick = {(e) = > this.toggle (e)} >细节< / span > < / td >}
https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578
先忘掉react:
这与react无关，让我们了解Java Script的基本概念。例如，您已经在java脚本中编写了以下函数(名称为A)。
function a() {
};
问题1)如何调用我们已经定义的函数?
答:一个();
问题2)如何传递函数的引用，以便稍后调用它?
答:让乐趣= a;
现在回到你的问题，你已经使用了函数名的paranthesis，这意味着当下面的语句将被渲染时，函数将被调用。
< td > < span onClick = {this.toggle()} >细节< / span > < / td >
那么如何改正呢?
简单! !只要去掉括号。通过这种方式，您已经将该函数的引用提供给onClick事件。它只在单击组件时才会回调函数。
<td><span onClick={this.toggle}>Details</span></td>
一个与反应相关的建议:
避免使用有人在回答中建议的内联函数，这可能会导致性能问题。
避免下面的代码，它将在函数被调用时一次又一次地创建同一个函数的实例(lamda语句每次都会创建新实例)。
注意:并且不需要显式地将事件(e)传递给函数。你可以在函数中访问它而不传递它。
{< td > < span onClick = {(e) = > this.toggle (e)} >细节< / span > < / td >}
https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578
