Реагируй на родной и это ключевое слово

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. Тем не менее, это все еще не работает.

Итак, у меня есть вопросы:

1. Какие именно проблемы приводят к тому, что приведенный выше код не работает. Интуиция деталей была бы оценена. Я впервые беру React Native за спин.
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. Методы были объяснены их плюсами и минусами

Также вы можете узнать больше о this от here