将参数传递给事件处理程序

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

将参数传递给事件处理程序

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

我打电话的时候也出现了同样的错误

this.handleClick = this.handleClick.bind(this);

当handleClick不存在时，在构造函数中

(我擦除了它，不小心在构造函数中留下了“this”绑定语句)。

解决方案=删除“this”绑定语句。

问题在这里:onClick={this.handleButtonChange(false)}

当你将this.handleButtonChange(false)传递给onClick时，你实际上是在调用value = false的函数，并将onClick设置为函数的返回值，这是未定义的。同样，调用this.handleButtonChange(false)，然后调用this.setState()，这会触发重新渲染，导致无限渲染循环。

解决方案是在lambda中传递函数:onClick={() => this.handleButtonChange(false)}。在这里，您将onClick设置为等于一个函数，该函数将在单击按钮时调用handleButtonChange(false)。

下面的例子可能会有所帮助:

function handleButtonChange(value){
  console.log("State updated!")
}

console.log(handleButtonChange(false))
//output: State updated!
//output: undefined

console.log(() => handleButtonChange(false))
//output: ()=>{handleButtonChange(false);}

在render()调用中所做的任何状态更改都将发出相同的警告。

一个很难找到的例子: 在基于状态数据呈现多选GUI组件时，如果状态没有任何显示，则调用resetOptions()被认为是该组件的状态更改。

显而易见的修复方法是在componentDidUpdate()中执行resetOptions()而不是render()。

为了更好地理解，我给出了一个通用的例子，在下面的代码中

render(){
    return(
      <div>

        <h3>Simple Counter</h3>
        <Counter
          value={this.props.counter}
          onIncrement={this.props.increment()} <------ calling the function
          onDecrement={this.props.decrement()} <-----------
          onIncrementAsync={this.props.incrementAsync()} />
      </div>
    )
  }

当提供道具时，我直接调用函数，这将有一个无限循环执行，并会给你那个错误，删除函数调用一切正常工作。

render(){
    return(
      <div>

        <h3>Simple Counter</h3>
        <Counter
          value={this.props.counter}
          onIncrement={this.props.increment} <------ function call removed
          onDecrement={this.props.decrement} <-----------
          onIncrementAsync={this.props.incrementAsync} />
      </div>
    )
  }