反應Redux的異步加載JavaScript的FB 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沒有定義。

但是，如果我做console.log(FB)在ComponentWillUnmount它不會給出錯誤，而是它會給出所需的輸出。

如何異步加載sdk，然後只檢查FB.getLoginStatus。

需要一些幫助......

Answer 1

您可以在Facebook類，需要照顧，並會等到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)); 
    } 
} 

然後使用該方法從您的包裝，而不是添加getLoginStatus方法原料FB：

const facebookAPI = new Facebook(); 


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