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

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>
    )
  }

问题当然是这个绑定，而租用按钮与onClick处理程序。解决方案是在渲染时调用动作处理程序时使用箭头函数。是这样的: onClick={() => this.handleButtonChange(false)}

如果您试图在重组中向处理程序添加参数，请确保在处理程序中正确地定义了参数。它本质上是一个咖喱函数，因此您希望确保需要正确数量的参数。本页提供了一个使用参数处理程序的好例子。

示例(摘自链接):

withHandlers({
  handleClick: props => (value1, value2) => event => {
    console.log(event)
    alert(value1 + ' was clicked!')
    props.doSomething(value2)
  },
})

为你的孩子HOC和在父

class MyComponent extends Component {
  static propTypes = {
    handleClick: PropTypes.func, 
  }
  render () {
    const {handleClick} = this.props
    return (
      <div onClick={handleClick(value1, value2)} />
    )
  }
}

这避免了在处理程序中编写匿名函数来修补没有在处理程序中提供足够参数名的问题。

看起来你不小心在你的渲染方法中调用了handleButtonChange方法，你可能想要做onClick={() => this.handleButtonChange(false)}代替。

如果您不想在onClick处理程序中创建lambda，我认为您需要有两个绑定方法，每个参数一个。

在构造函数中:

this.handleButtonChangeRetour = this.handleButtonChange.bind(this, true);
this.handleButtonChangeSingle = this.handleButtonChange.bind(this, false);

在渲染方法中:

<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChangeSingle} >Retour</Button>
<Button href="#" active={this.state.singleJourney} onClick={this.handleButtonChangeRetour}>Single Journey</Button>

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

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

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

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

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