React本地关键字和this关键字

Question

我正在将Facebook登录集成到我正在构建的Reactive原住民应用程序中。我有以下代码：

class FacebookButton extends Component {

  constructor(props) {
    super(props);
    this.fetchAccessToken = this.fetchAccessToken.bind(this);
  }

  facebookButtonPressed() {
    LoginManager.logInWithReadPermissions(['public_profile']).then((result) => {
      if (result.isCancelled) {
        console.log('Login Cancelled');
      } else {
          this.fetchAccessToken();
      }
    })
    .catch((error) => {
      console.log('Login fail with error: ' + error);
    });

  }

  fetchAccessToken() {
    AccessToken.getCurrentAccessToken().then((data) => {
        const { accessToken } = data
        console.log(accessToken);
    })
    .catch(() => {
      console('Error getting access token');
    });
  }
  render() {
    return (
      <Button
          onPress={this.facebookButtonPressed}
          title="Sign In with Facebook"
          color="#000000"
      />
    );
  }

}

但是，我一直收到一个错误，即fetchAccessToken方法不是一个函数。出于第一本能，我认为问题this的关键词就是问题所在。因此，我开始添加上面的构造并将this绑定到它。我以为this是指FacebookButton。也就是说，我假设每当我调用this.fetchAccessToken()时，它都会调用该方法。然而，这是行不通的。

然后我继续阅读，有几个引用表明我应该使用Arrow functions作为箭头函数，没有与该函数相关联的this，并且这个this.fetchAccessToken()只有一个上下文，即FacebookButton。然而，这仍然不起作用。

所以我有个问题：

1. 导致上述代码不工作的确切问题是什么。详细的直觉将不胜感激。我第一次带着“反应本地人”旋转一下。
2. 解决办法是什么？

更新

问题2的答案是将.bind(this)添加到按钮中，如下所示：

<Button
    onPress={this.facebookButtonPressed.bind(this)}
    title="Sign In with Facebook"
    color="#000000"
/>

Answer 1

您还需要将构造函数中的facebookButtonPressed()绑定到引用this作为fetchAccessToken

constructor(props) {
        super(props);
        this.facebookButtonPressed = this.facebookButtonPressed.bind(this)
        this.fetchAccessToken = this.fetchAccessToken.bind(this);
    }

当一个函数被调用时，激活记录(或者称为执行上下文)创建了。此记录包含有关函数从何处调用(调用堆栈)、函数如何调用、传递哪些参数等信息。

现在，除非绑定它，否则不会引用它。

下面是binding.The方法的一些不同的方法，并解释了它们的优缺点

此外，您还可以从this网站here上了解更多有关here的信息。