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

onClick您应该调用函数，也就是调用函数切换。

onClick={() => this.toggle()}

1.如果要在调用中传递参数，则需要按如下所示调用方法。由于我们使用的是箭头函数，因此无需在中绑定方法cunstructor。

onClick={() => this.save(id)} 

当我们像这样在构造函数中绑定方法时

this.save= this.save.bind(this);

那么我们需要在不传递任何参数的情况下调用方法，如下所示

onClick={this.save}

并且我们尝试在调用函数时传递参数，如下所示，那么错误就好像超出了最大深度。

 onClick={this.save(id)}

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

inputDigit(digit){
  this.setState({
    displayValue: String(digit)
  })

<button type="button"onClick={this.inputDigit(0)}>

为什么？

<button type="button"onClick={() => this.inputDigit(1)}>1</button>

函数onDigit设置状态，这将导致重新渲染，这将导致onDigit触发，因为这是您设置为onClick的值，这将导致设置状态而导致重新渲染，这将导致onDigit触发，因为这就是您要设置的值再…等等

如果您不需要将参数传递给函数，只需从函数中删除（），如下所示：

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

但是，如果要传递参数，则应执行以下操作：

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

首先，忘记反应：
这与反应无关，让我们了解Java Script的基本概念。例如，您已经用Java脚本（名称为A）编写了以下函数。

function a() {

};

Q.1）如何调用我们定义的函数？
答：a（）;

Q.2）如何传递函数的引用，以便我们可以稍后调用它？
答：让我们开心吧= a;

现在来问您的问题，您已经在函数名称中使用了括号，这意味着在呈现以下语句时将调用该函数。

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

那么如何纠正呢？
简单！！只需删除括号即可。通过这种方式，您已将该函数的引用提供给onClick事件。仅当单击组件时，它才会回调函数。

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

有一个建议可以做出反应：
避免使用某人在回答中建议的内联函数，否则可能会导致性能问题。避免遵循以下代码，每次调用函数时都会一次又一次创建相同函数的实例（lamda语句每次都会创建新实例）。
注意：无需将事件（e）显式传递给该函数。您可以在函数中使用它而无需传递它。

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

https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

那是因为您在render方法中调用了toggle，这将导致重新渲染，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>}

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