react redux async load FB javascript sdk

Question

我有一个加载javascript sdk的函数，它像：

class Facebook{
    constructor(){
        window.fbAsyncInit = () => {
                FB.init({
                    appId      : 'myappID',
                    cookie     : true, 
                    xfbml      : true, 
                    version    : 'v2.5'
                });
            }
        if (typeof(FB) == 'undefined') {
            ((d, s, id) => {
              let js, fjs = d.getElementsByTagName(s)[0];
              if (d.getElementById(id)) return;
              js = d.createElement(s);
              js.id = id;
              js.src = "//connect.facebook.net/en_US/sdk.js";
              fjs.parentNode.insertBefore(js, fjs);
            })(document, 'script', 'facebook-jssdk');
        }
    }
}
export default Facebook

在我的组件中，我正在检查用户是否通过 facebook 登录.. 所以在我的ComponentDidMount中，我正在做类似的事情......

let facebook = new Facebook()
console.log(FB)
FB.getLoginStatus(function(response){
    if(response.status == "connected"){
    //Do something
}
})

在这里，当异步加载FB时，首先调用我的console.log(FB)。所以它给了我错误FB没有定义。

但是，如果我在ComponentWillUnmount中console.log(FB)，它不会给出错误，而是给出所需的输出。

如何异步加载sdk，然后只检查FB.getLoginStatus.

需要一些帮助...

Answer 1

您可以在

Facebook类中添加getLoginStatus方法，该方法会小心并等待Facebook脚本加载

class Facebook {
  initFbScript() {
    if(!this.scriptPromise) {
      this.scriptPromise = new Promise((resolve, reject) => {
        window.fbAsyncInit = () => {
          FB.init({/*FB init parameters*/});
          resolve();
        };
        if (typeof(FB) == 'undefined') {
          // load Facebook script...
        }
      })
    }
    return this.scriptPromise;
  }
  getLoginStatus(callback) {
    return this.initFbScript().then(() => FB.getLoginStatus(callback));
  }
}

然后使用包装器中的方法而不是原始FB：

const facebookAPI = new Facebook();

facebookAPI.getLoginStatus(function(response){
  if(response.status == "connected"){
    //Do something
  }
})