Apollo Query中this绑定问题：React提示this未定义如何解决？

嘿，我完全懂你踩的这个坑！在类组件里传递方法时，this绑定确实容易出问题，尤其是在Apollo Query这种嵌套组件里传递回调的时候。下面给你几种靠谱的解决办法，都能让this稳稳指向你的Coinbase组件，顺利调用next方法：

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

这是类组件里最经典的绑定方式，在组件初始化时就把next方法的this绑定到当前实例：

class Coinbase extends Component {
  constructor(props){
    super(props);
    // 关键：手动绑定this到Coinbase实例
    this.next = this.next.bind(this);
  }

  next() {
    // 这里的this现在就指向Coinbase组件了
    console.log(this);
    // 你的业务逻辑...
  }

  render() {
    return (
      <Query query={YOUR_QUERY}>
        {({ loading, error, data }) => {
          if (loading) return <div>Loading...</div>;
          if (error) return <div>Error!</div>;
          
          // 直接传递this.next即可，this已经绑定好了
          return <SimpleNavButton onClick={this.next}>Next</SimpleNavButton>;
        }}
      </Query>
    );
  }
}

方法2：用箭头函数定义类方法 #

箭头函数会自动捕获当前上下文的this，也就是Coinbase组件的实例，这样就不用手动bind了，写法更简洁：

class Coinbase extends Component {
  constructor(props){
    super(props);
  }

  // 用箭头函数定义next方法，this自动绑定到Coinbase
  next = () => {
    console.log(this);
    // 你的业务逻辑...
  }

  render() {
    return (
      <Query query={YOUR_QUERY}>
        {({ loading, error, data }) => {
          if (loading) return <div>Loading...</div>;
          if (error) return <div>Error!</div>;
          
          return <SimpleNavButton onClick={this.next}>Next</SimpleNavButton>;
        }}
      </Query>
    );
  }
}

方法3：在onClick中用箭头函数包裹（应急方案） #

如果只是临时用或者不想改方法定义，也可以在传递onClick的时候用箭头函数包裹，这样每次点击时都会在Coinbase的上下文里调用next：

class Coinbase extends Component {
  constructor(props){
    super(props);
  }

  next() {
    console.log(this);
    // 你的业务逻辑...
  }

  render() {
    return (
      <Query query={YOUR_QUERY}>
        {({ loading, error, data }) => {
          if (loading) return <div>Loading...</div>;
          if (error) return <div>Error!</div>;
          
          // 用箭头函数包裹，确保this指向Coinbase
          return <SimpleNavButton onClick={() => this.next()}>Next</SimpleNavButton>;
        }}
      </Query>
    );
  }
}

为什么原来会出现this is undefined？ #

类组件的方法默认是没有绑定this的，当你把this.next作为props传递给Query内部的SimpleNavButton时，它的执行上下文已经脱离了Coinbase组件，所以this会变成undefined（在React的严格模式下），而不是你期望的Coinbase实例。上面的三种方法都是通过不同方式把this牢牢绑定到Coinbase上，解决这个问题。

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