React类组件Tab切换报Cannot read property 'setState' of undefined如何解决

类组件中普通定义的方法默认不会绑定组件实例的this，当你直接把this.switchingTabs作为onChange的回调传递时，函数触发时内部的this指向为undefined，因此调用this.setState时抛出对应错误。你看到value参数正常是因为它是回调函数的入参，和this指向无关。

你可以任选以下三种方案中的一种实现：

• 方案1：构造函数内手动绑定this
  在构造函数中添加绑定逻辑即可，其余代码保持不变：

constructor(props) {
  super(props);
  this.state = { tab: 0 };
  // 绑定this到当前组件实例
  this.switchingTabs = this.switchingTabs.bind(this);
}

• 方案2：将方法定义为类属性箭头函数
  修改switchingTabs的定义方式，箭头函数会自动继承外层作用域的this，不需要额外绑定：

switchingTabs = (event, value) => {
  console.log(value);
  this.setState({
    tab: value,
  });
  // 额外提示：setState是异步执行的，这里直接打印this.state拿不到更新后的值
  // 如果需要读取更新后的state，可以在setState的第二个回调参数中操作：
  // this.setState({ tab: value }, () => console.log(this.state))
}

• 方案3：事件绑定时用箭头函数包裹
  修改Tabs组件的onChange属性，直接在回调中调用方法，此时this指向组件实例：

<Tabs value={this.state.tab} onChange={(e, value) => this.switchingTabs(e, value)}>

该方案实现最简单，但每次组件渲染都会生成新的匿名函数，性能略差于前两种方案。

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