React组件构造函数内调用函数报错：this为undefined如何解决？

这个问题在React开发里挺常见的，核心原因是普通函数作为回调时，this的绑定会脱离组件实例——你在setCheckoutCallbacks里定义的普通函数，它的this并不会指向你的React组件实例，自然找不到moveToNextStep方法。下面给你几种实用的解决办法：

方法1：用箭头函数替代普通函数 #

箭头函数不会创建自己的this，它会继承外层作用域的this（也就是你的组件实例）。修改回调部分，把返回的close方法改成箭头函数就行：

class XXXXX extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      chargebeeInstance: windowChargebeeinit({ site: "xxxxxxxxxxxxx-test" })
    }
    this.state.chargebeeInstance.setCheckoutCallbacks(() => {
      return {
        close: () => {
          this.moveToNextStep();
        }
      }
    })
  }

  moveToNextStep(){
    this.props.jumpToNextStep(3);
  }
}

方法2：提前保存组件实例的this引用 #

在构造函数里先把组件的this存到一个变量（比如that或者self）里，然后在回调里用这个变量来调用方法：

class XXXXX extends React.Component {
  constructor(props) {
    super(props);
    const that = this; // 保存组件实例的this
    this.state = {
      chargebeeInstance: windowChargebeeinit({ site: "xxxxxxxxxxxxx-test" })
    }
    this.state.chargebeeInstance.setCheckoutCallbacks(function(){
      return{
        close:function(){
          that.moveToNextStep(); // 用保存的that调用方法
        }
      }
    })
  }

  moveToNextStep(){
    this.props.jumpToNextStep(3);
  }
}

方法3：提前绑定moveToNextStep方法 #

在构造函数里把moveToNextStep的this绑定到组件实例，再结合箭头函数确保回调里的this指向正确：

class XXXXX extends React.Component {
  constructor(props) {
    super(props);
    // 提前绑定moveToNextStep的this到组件实例
    this.moveToNextStep = this.moveToNextStep.bind(this);
    this.state = {
      chargebeeInstance: windowChargebeeinit({ site: "xxxxxxxxxxxxx-test" })
    }
    this.state.chargebeeInstance.setCheckoutCallbacks(() => {
      return {
        close: () => {
          this.moveToNextStep();
        }
      }
    })
  }

  moveToNextStep(){
    this.props.jumpToNextStep(3);
  }
}

个人最推荐第一种方法，箭头函数的写法更简洁，也能避免手动绑定的额外操作。

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