React Native+TypeScript+async组合报错：this.foo is not a function

兄弟，别冤枉TypeScript啦！你碰到的这个报错跟TS半毛钱关系没有，核心是JavaScript中函数的this绑定问题——当你直接把this.buttonPressed传给Button的onPress时，触发点击时函数的this上下文已经不是你的App组件实例了，自然找不到foo方法。下面给你几种靠谱的解决办法：

方法1：用箭头函数包裹事件回调 #

最简单的写法，在render里直接用箭头函数把buttonPressed包起来，这样箭头函数会捕获当前组件的this上下文：

render() { 
  return ( 
    <Button title="A Button" onPress={() => this.buttonPressed()} /> 
  ); 
}

方法2：把类方法定义成箭头函数（推荐） #

直接在类里把buttonPressed声明为箭头函数属性，这样它会自动绑定组件实例的this，还不用每次render都创建新函数：

export default class App extends Component<Props> { 
  render() { 
    return ( <Button title="A Button" onPress={this.buttonPressed} /> ); 
  } 
  // 改成箭头函数属性，自动绑定this
  buttonPressed = () => { 
    this.foo().then(movies => { console.log(movies); }); 
  } 
  async foo() { 
    try { 
      let response = await fetch('你的接口地址');
      // 补充你的响应处理逻辑
    } catch (err) {
      console.error('请求出错：', err);
    }
  }
}

小提示：TypeScript默认支持这种语法，要是项目报错，检查下tsconfig.json里有没有开启"target": "ES6"或更高版本，以及"strictPropertyInitialization": false（如果不需要严格初始化检查的话）。

方法3：在构造函数中手动bind this #

这是传统React类组件的写法，在构造函数里把buttonPressed的this手动绑定到组件实例：

export default class App extends Component<Props> { 
  constructor(props: Props) {
    super(props);
    // 手动绑定this到组件实例
    this.buttonPressed = this.buttonPressed.bind(this);
  }

  render() { 
    return ( <Button title="A Button" onPress={this.buttonPressed} /> ); 
  } 
  buttonPressed() { 
    this.foo().then(movies => { console.log(movies); }); 
  } 
  async foo() { 
    try { 
      let response = await fetch('你的接口地址');
      // 补充你的响应处理逻辑
    } catch (err) {
      console.error('请求出错：', err);
    }
  }
}

另外多说一句：你的async foo()方法本身没问题，但如果foo里需要用到组件的this（比如访问state/props），也要确保它的this绑定正确——不过你现在的报错是找不到foo，所以解决buttonPressed的this绑定就够啦。

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