在meteor-react render（）方法中使用async meteor.call（）

我使用Meteor和React作爲我的應用程序。在我的應用程序中，我使用account-ui，account-facebook讓用戶可以使用facebook帳戶登錄。現在，我想檢查用戶是否使用Facebook登錄或定期用戶/通過登錄。我看着用戶收集和發現在meteor-react render（）方法中使用async meteor.call（）

1) if user used facebook to login, there is services.facebook in user collection 
2) if user used regular user/pass to login, there is services.password in users collection

在服務器，我有方法返回login服務（Facebook或密碼）

Meteor.methods({ 
     getLoginService: function(){ 
      let services = Meteor.user().services; 
      if (typeof services.facebook!=='undefined'){ 
       return 'facebook'; 
      }else if (typeof services.password!=='undefined'){ 
       return 'password'; 
      } 
      return 'undefined'; 
     }, 
    });

在客戶端，如果將檢查，看看是否是（臉譜登錄）或（用戶/通過登錄），然後我可以呈現相應的屏幕

App.Components.Dashboard = React.createClass({ 

    render() { 
    var lservice=''; 
    Meteor.call("getLoginService",function(error,service) { 
     if (error){ 
     }else { 
      lservice = service; 
     } 
    }); 

    if (lservice === 'facebook'){ 
     return (
      <div id="dashboard-content"> 
       <div className="row"> 
       <div className="col-lg-12"> 
        <h1 className="page-header">Facebook connect</h1> 
        <p>put facebook information here</p> 
       </div> 
       </div> 
      </div> 
     ); 



    }else{ 
     return (
      <div id="dashboard-content"> 
       <div className="row"> 
       <div className="col-lg-12"> 
        <h1 className="page-header">Facebook connect</h1> 
        <p>put facebook connect button here</p> 
       </div> 
       </div> 
      </div> 
     ); 
     } 

    } 
});

問題是在客戶端。因爲Meteor.call是異步的，所以lservice不會從回調函數中獲取值。我也試圖找到一種方法將HTML返回到回調函數（錯誤，服務），但不成功。

無論如何，你是否知道解決這個問題。或者你有什麼更好的主意來認識什麼樣的服務，用戶用於登錄（也許鉤到帳戶Facebook）

來源

2016-02-24 David

開始移動您的電話Meteor.call爲componentWillMount，以便它只運行一次 - 就在組件之前第一次呈現。

你的render方法中的代碼會在每次狀態或道具改變時被調用，你可能只需要獲得一次登錄服務。

接下來，不是將service字符串存儲在局部變量中，而是將其存儲在state中，以便組件在每次更新時都會呈現它。

getInitialState() { 
    return {}; 
}, 
componentWillMount() { 
    Meteor.call("getLoginService", (error, service) => { 
    if(error) { 
     // handle error 
    } else { 
     this.setState({ service }); 
    } 
    }); 
}, 
render() { 
    const { service } = this.state; 

    if(service === 'facebook') { 
    // return facebook view 
    } else if(service === 'password') { 
    // return password view 
    } else { 
    // return loading view 
    } 
}

的應用程序第一次呈現，該服務可能將無法使用（它會等着回來的要求），所以它會呈現else子句中的加載視圖。

但是，當調用回調（提供沒有錯誤）時，組件的狀態將被更新，組件將重新呈現。

這次服務將可用，並顯示正確的視圖。

來源

2016-02-24 17:02:39

謝謝丹太子。我將使用你的代碼並看看。再次，非常感謝您的快速回答。 – David

嗨，我試過了你的代碼，並返回錯誤：Uncaught TypeError：無法讀取null的屬性'service'。如果我在const {service} = this.state之後放置alert（service），我可以看到服務的值是正確的，但錯誤仍然存在，並且頁面無法呈現.. – David

@David，您需要從'getInitialState'返回組件的初始狀態，否則它將默認爲'null'，並且不能將'null'解構爲對象。更新了答案。 –

在meteor-react render（）方法中使用async meteor.call（）

回答

相關問題