React Native中EventHandler调用函数异常：PayTM回调无法访问方法与状态

这个问题我太熟了！你碰到的是React类组件里常见的**this上下文丢失**问题——当你直接把this.onPayTmResponse传给PayTM的事件监听器时，这个回调函数里的this已经不是你的组件实例了，所以调用组件方法或访问状态时才会出现undefined错误。下面给你三个实用的解决办法，随便选一个都能搞定：

方法1：在构造函数中手动绑定this #

在组件的构造函数里，把回调方法的this强制绑定到组件实例上，这样回调里就能正常访问组件的状态和方法了：

constructor(props) {
  super(props);
  // 关键：绑定this到组件实例
  this.onPayTmResponse = this.onPayTmResponse.bind(this);
}

componentWillMount() {
  if(Platform.OS == 'ios'){
    const { RNPayTm } = NativeModules
    const emitter = new NativeEventEmitter(RNPayTm)
    emitter.addListener('PayTMResponse', this.onPayTmResponse)
  }
}

onPayTmResponse(response) {
  // 现在可以正常访问this了！
  console.log('组件状态：', this.state);
  // 调用你的服务器请求函数
  this.sendResponseToServer(response);
}

方法2：添加监听器时用箭头函数包裹 #

箭头函数会自动继承外层作用域的this，所以直接在addListener里用箭头函数调用你的回调方法即可：

componentWillMount() {
  if(Platform.OS == 'ios'){
    const { RNPayTm } = NativeModules
    const emitter = new NativeEventEmitter(RNPayTm)
    emitter.addListener('PayTMResponse', (response) => {
      // 箭头函数里的this就是组件实例
      this.onPayTmResponse(response);
    })
  }
}

onPayTmResponse(response) {
  this.sendResponseToServer(response);
}

方法3：把回调定义为类属性箭头函数 #

这是最简洁的写法，直接用箭头函数定义组件方法，它会自动绑定组件的this上下文：

componentWillMount() {
  if(Platform.OS == 'ios'){
    const { RNPayTm } = NativeModules
    const emitter = new NativeEventEmitter(RNPayTm)
    emitter.addListener('PayTMResponse', this.onPayTmResponse)
  }
}

// 用箭头函数定义方法，自动绑定this
onPayTmResponse = (response) => {
  console.log('当前组件状态：', this.state);
  this.sendResponseToServer(response);
}

三种方法本质都是为了让回调函数里的this指向你的组件实例，选你觉得最顺手的就行～

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