React中setState回调this失效问题及两种写法的适用场景

这个问题本质上是JavaScript函数的this绑定机制在React组件里的具体体现，咱们一步步拆解来看：

先明确两种写法的核心差异 #

你提到的两种写法，本质区别在于回调函数被调用时的this上下文：

• this.setState({...}, this.callback)：直接把this.callback作为回调传给setState，此时setState会以普通函数的方式调用它，this的指向完全取决于callback本身是否已经绑定了正确的上下文。
• this.setState({...}, () => { this.callback(); })：用箭头函数包裹调用，箭头函数没有自己的this，会自动捕获当前作用域的this（也就是组件实例），再调用this.callback，这时候callback里的this自然就指向组件实例了。

什么时候用哪种写法？ #

1. 可以直接传this.callback的场景 #

当你的callback本身已经通过某种方式绑定了组件实例的this时，直接传递就完全安全：

• 场景一：callback是箭头函数定义的类属性
  箭头函数在定义时会自动捕获当前类实例的this，不管后续怎么调用它，this都不会改变：

  class MyComponent extends React.Component {
    // 箭头函数定义的类属性，this已绑定到组件实例
    callback = () => {
      console.log(this.state.count); // 这里的this正常指向组件
    }
  
    handleUpdate = () => {
      this.setState({ count: this.state.count + 1 }, this.callback); // 直接传没问题
    }
  }
  

• 场景二：callback已经提前通过bind绑定了this
  如果是普通函数定义的callback，你在constructor里提前绑定了this，也可以直接传：

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      // 提前绑定this到组件实例
      this.callback = this.callback.bind(this);
    }
  
    callback() {
      console.log(this.state.count); // 这里的this正常指向组件
    }
  
    handleUpdate() {
      this.setState({ count: this.state.count + 1 }, this.callback); // 直接传没问题
    }
  }
  

2. 必须用箭头函数包裹的场景 #

当你的callback是未绑定的普通类方法时，直接传this.callback会导致this丢失（严格模式下this会变成undefined），这时候必须用箭头函数包裹：

class MyComponent extends React.Component {
  // 普通函数定义的类方法，未绑定this
  callback() {
    console.log(this.state.count); // 如果直接传，这里的this会是undefined
  }

  handleUpdate() {
    // 错误写法：this.setState({...}, this.callback);
    // 正确写法：用箭头函数捕获当前组件的this，再调用callback
    this.setState({ count: this.state.count + 1 }, () => { this.callback(); });
  }
}

这里箭头函数的作用就是“保留”当前组件实例的this，确保调用this.callback()时，callback里的this指向组件。

通用规则总结 #

一句话就能理清：先看你的callback是否已经绑定了组件实例的this

• 如果是箭头函数类属性、或者已经通过bind绑定过 → 直接传this.callback即可；
• 如果是未绑定的普通类方法 → 必须用箭头函数包裹调用，或者在传参时用this.callback.bind(this)（效果和箭头函数完全一致）。

另外补充一句：在函数组件中使用useState时，不存在这个问题，因为函数组件没有this，直接用定义好的回调函数就行~

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