在React中,为什么我必须绑定onClick函数而不是调用它？

Question

在本教程中,他使用带有bind的onClick函数.

<Card onClick={that.deletePerson.bind(null, person)} name={person.name}></Card>

当我像这样删除绑定

<Card onClick={that.deletePerson(person)} name={person.name}></Card>

我收到一个错误

未捕获错误:不变违规:setState(...):在现有状态转换(例如内部render)期间无法更新.渲染方法应该是道具和状态的纯函数.

我知道是什么bind,但为什么需要这里呢？是onClick不是直接调用函数？

(代码在这个JSbin中:https://jsbin.com/gutiwu/1/edit )

Answer 1

他用bind这样的deletePerson方法获取正确的person说法.

因为Card组件没有获得完整的Person对象,所以这使他能够识别实际点击了哪个人的卡.

在您的示例中,您删除绑定的onClick={that.deletePerson(person)}位置实际上是在评估函数that.deletePerson(person)并将其设置为onClick.该deletePerson方法更改了组件的状态,这是错误消息所说的内容.(在渲染过程中无法更改状态).

更好的解决方案可能是将id传递给Card,并在删除单击时将其传递回app组件.

var Card = React.createClass({
  handleClick: function() {
    this.props.onClick(this.props.id)
  }
  render: function () {
      return (
          <div>
              <h2>{this.props.name}</h2>
              <img src={this.props.avatar} alt=""/>
              <div></div>
              <button onClick={this.handleClick}>Delete Me</button>
          </div>
      )
  }
})

var App = React.createClass({

  deletePerson: function (id) {
    //Delete person using id
  },

  render: function () {
    var that = this;
    return (
        <div>
            {this.state.people.map(function (person) {
                return (
                    <Card onClick={that.deletePerson} name={person.name} avatar={person.avatar} id={person.id}></Card>
                )
            }, this)}
          </div>
      )
  }
})