Question

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

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。但是，这仍然无效。

所以我有疑问：

导致上述代码无效的确切问题是什么？一个细节直觉将不胜感激。我第一次带React Native进行旋转。
修复是什么？

更新

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

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

Answer 1

您还需要在构造函数中绑定facebookButtonPressed()以引用this的{{1}}作为

fetchAccessToken

调用函数时，会创建激活记录，也称为执行上下文，。此记录包含有关从（调用堆栈）调用函数的位置的信息，调用函数的方式，传递的参数等等。

现在没有引用，除非你绑定它。

以下是binding的一些不同方法。这些方法已由专业人员和缺点解释

您还可以从here

了解有关

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

的更多信息

React Native和这个关键字

1 个答案: