React Native类内调用成员函数报undefined错误如何解决

这个错误是典型的this指向丢失问题，由两个原因共同导致：

1. 原生JavaScript类的普通成员方法不会自动绑定实例this，直接调用时this的指向取决于运行上下文，不是固定指向类实例，所以this.PayNow会读取为undefined，调用就会抛出undefined is not a function错误。
2. 你把类成员方法CODPayBtn当作自定义JSX组件使用（<this.CODPayBtn />写法），React在渲染这类组件时会重新创建执行上下文，进一步破坏了this指向。

下面三种方案选一种即可，推荐优先使用方案2：

• 方案1：在constructor中手动绑定this指向
  在构造函数内添加两个方法的绑定逻辑：

constructor(props) {
  super(props);
  this.state = {};
  // 绑定成员方法的this指向
  this.PayNow = this.PayNow.bind(this);
  this.CODPayBtn = this.CODPayBtn.bind(this);
}

• 方案2：将成员方法改为箭头函数写法
  箭头函数会继承外层作用域的this，天然绑定类实例，不需要额外绑定：

// 改成箭头函数
PayNow = (payM) => {
  console.log(payM);
}

CODPayBtn = (props) => {
  // 原有逻辑保持不变
}

• 方案3：不把CODPayBtn当作组件使用，改为普通渲染函数调用
  直接在render中调用方法返回JSX，而不是用组件标签形式，也能避免上下文丢失：

render(){
  return(
    <SafeAreaView>
      <ScrollView>
        <View>
          {/* 改成普通方法调用，不要用组件标签写法 */}
          {this.CODPayBtn({
            total: this.state.total,
            temp: this.state.temp,
            charge: this.state.charge
          })}
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}

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