не может прочитать "это" в реакции на нативную функцию - PullRequest
Новая
       25

не может прочитать "это" в реакции на нативную функцию

0 голосов
/ 18 февраля 2019

Я пытаюсь установить пользовательские данные с входа в Facebook и сохранить их в состоянии, но произошла ошибка.

Аутентификация Facebook 

_fbAuth(){
  LoginManager.logInWithReadPermissions(['public_profile']).then(function(res){
    if(res.isCancelled){
      console.log('login cancelled.')
    } else {
      AccessToken.getCurrentAccessToken().then(tokenData => {
        if(tokenData) {
          const { accessToken, userID } = tokenData;
          fetch('https://graph.facebook.com/v2.5/me?fields=email,name,friends&access_token=' + accessToken).then((response) => 
            response.json()).then((json) => {
              this.setState({ user_email: json.email })
            }).catch(() => {
              reject('ERROR GETTING DATA FROM FACEBOOK')
            }
          )
        }
      })
    }
  }, function(err){
    console.log(err)
  })
}

Регистрация данных в состоянии, выдающем эту ошибку:

[Ошибка типа: undefined не является функцией (вычисление '_this3.setState ({user_email: json.email})')]

Как мне получить доступ к this в ответе fetch()?

Ответы [ 3 ]

0 голосов
/ 18 февраля 2019

Добавьте эту строку в конструктор, чтобы связать контекст компонента с областью действия функции. 

this._fbAuth = this._fbAuth.bind(this);

Это должно работать!

0 голосов
/ 18 февраля 2019

Не используйте bind или старый const that = this обходной путь.Это намного проще, если вы просто полностью переключитесь на функции стрелок, и я бы посоветовал использовать async / await.Например: 

_fbAuth = async () => {
    try {
        let resLogin = await LoginManager.logInWithReadPermissions(['public_profile', 'email', 'user_friends']);
        if(resLogin.isCancelled){
            console.log('login cancelled.');
            return;
        }
        let resTokenData = await AccessToken.getCurrentAccessToken();
        if(resTokenData) {
            const {accessToken, userID} = resTokenData;
            let resAPI = await fetch(`https://graph.facebook.com/v2.5/me?fields=email,name,friends&access_token=${accessToken}`);
            resAPI = resAPI.json();
            this.setState({user_email: resAPI.email});
        }
    } catch (err) {
        console.log(err);
    }
};

Избегайте «ада обратного вызова», он выглядит намного чище и легче читается с помощью async / await.Должен работать с LoginManager, так как кажется, что он возвращает Promise.Я также добавил строки шаблона в пример и добавил возврат, когда пользователь отменил.Таким образом, нет необходимости делать отступ для всего блока * 1006. *

Кстати, вы пытаетесь получить электронную почту и друзей с помощью API, но вы не спрашиваете разрешения, это намеренно?Я все равно добавил разрешения.

0 голосов
/ 18 февраля 2019

Причина в том, что this потеряно из-за вложенных функций стрелок.Вы определяете переменную для хранения ссылки на this и используете вместо нее that.

Вы можете решить эту проблему, выполнив в своей функции следующее 

_fbAuth = () => {
  const that = this;
  ...
  that.setState({ user_email: json.emal });
  ...
}

Вы также должны убедиться, что вы связали свою функцию, либо сделав ее функцией стрелки, либо связав ее вконструктор

...