在本教程中，他使用带有绑定的 onClick 函数。
<Card onClick={that.deletePerson.bind(null, person)} name={person.name}></Card>
当我像这样删除绑定时
<Card onClick={that.deletePerson(person)} name={person.name}></Card>
我收到一个错误
未捕获的错误：不变违规：setState(...)：无法在现有状态转换期间更新（例如在 内
render）。Render 方法应该是 props 和 state 的纯函数。
我知道是什么bind，但为什么这里需要它？是onClick不是直接调用该函数？
（代码在这个 JSbin：https ://jsbin.com/gutiwu/1/edit ）
他正在使用 ，bind以便该deletePerson方法获得正确的person参数。
因为该Card组件没有得到一个完整的Person对象，这使他能够识别实际点击了哪个人的卡片。
在您的示例中，您删除绑定的onClick={that.deletePerson(person)}位置实际上是在评估函数that.deletePerson(person)并将其设置为 onClick。该deletePerson方法更改组件的状态，这就是错误消息所说的内容。（您不能在渲染期间更改状态）。
更好的解决方案可能是将 id 传递给 Card，然后在单击删除时将其传递回应用程序组件。
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>
)
}
})