Проблема с библиотекой входа Reactjs в Facebook - сделать функцию componentClicked асинхронной

Question

Я пытаюсь внедрить логин на Facebook для своего приложения реакции (с редукцией).

Компонент "FacebookLogIn" в моем файле loginUser.js выглядит следующим образом:

<FacebookLogin
   appId="375026166397978"
   autoLoad={true}
   fields="name,email,picture"
   onClick={this.componentClicked.bind(this)}
   callback={this.responseFacebook} />

Поэтому, когда я пытаюсь импортировать действие, подобное этому:

import { loginWithFaceBook } from '../actions/';

И попробуйте войти через Facebook через функцию componentClicked:

 componentClicked(){
    console.log(this.props);
    this.props.loginWithFaceBook(facebookUser);
}

Я получил ошибку bundle.js:51161 Uncaught TypeError: this.props.loginWithFaceBook is not a function

Я думаю, что это проблема с областью действия, поскольку я также импортирую обычную функцию входа из 'действий'folder как {login}, а this.props.login работает как обычно, но я не знаю, как это исправить.

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

componentClicked(){
    loginWithFaceBook(facebookUser).then(() => {
        this.props.history.push('/posts');
    }).catch((e) => {
        alert(e);
    });;
}

Ошибка: bundle.js:51165 Uncaught TypeError: (0 , _actions.loginWithFaceBook)(...).then is not a function

Я был бы очень признателен за любуюпомощь.

Answer 1

Изменить

this.props.loginWithFaceBook(facebookUser);

на

loginWithFaceBook(facebookUser);

При импорте

import { loginWithFaceBook } from '../actions/'; 

вам не нужно использовать this.props, вы можете напрямую использоватьЭто.this.props приходит на картинку, когда вы хотите использовать реквизит родителя.