为什么React onClick绑定普通类实例方法会出现setState报错

这个问题的核心是JavaScript中普通函数与箭头函数的this绑定规则差异，具体原因如下：

1. 普通类方法this丢失的原因 #

普通函数的this指向是运行时动态绑定的，而非定义时绑定：

• 你在代码中直接将onClick={this.clickMe}传递给按钮事件时，相当于把clickMe方法的引用单独传给了事件回调
• 当点击事件触发时，React会单独调用这个回调函数，此时函数的执行上下文已经脱离了组件实例，严格模式下this会被赋值为undefined
• 这就导致执行this.setState时，找不到undefined的setState属性，抛出对应报错

2. 箭头函数能正常运行的原因 #

箭头函数不存在自己的this，它的this是继承自定义时所在外层作用域的this：

• 当你把clickMe定义为类的箭头函数属性时，它的外层作用域就是类的实例构造上下文，this会被永久绑定到当前组件实例
• 无论后续在哪里调用这个箭头函数，this都不会改变，始终指向组件实例，所以可以正常调用this.setState更新状态

可选的其他解决方案 #

除了将方法定义为箭头函数，你也可以通过以下两种方式修复这个问题：

• 在构造函数中手动绑定this：

constructor(){
    super();
    this.state = {
        name : "Farhan Ahmed"
    }
    // 手动绑定this到组件实例
    this.clickMe = this.clickMe.bind(this)
}

• 在事件绑定时用箭头函数包裹调用：

<button className="btn btn-success" onClick={() => this.clickMe()}>Change Text</button>

内容的提问来源于stack exchange，提问作者user10798329