在流星反应中使用异步meteor.call()render()方法

时间:2016-02-24 16:51:24

标签: javascript asynchronous meteor reactjs meteor-accounts

我正在为我的应用使用Meteor和React。在我的应用程序中,我使用account-ui,account-facebook让用户可以使用Facebook帐户登录。 现在,我想检查用户是否使用Facebook登录或常规用户/传递登录。我查看用户集合并查看

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

在服务器中,我有返回loginservice(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';
        },
    });

在客户端,如果要检查是否(facebook登录)或(用户/通过登录),那么我可以相应地渲染屏幕

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返回到回调函数(错误,服务)但不成功。

你知道无论如何要解决这个问题。或者您是否有更好的想法来识别用户用于登录的服务(可能是帐户-face的钩子)

1 个答案:

答案 0 :(得分:2)

首先将您的呼叫转移到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子句中呈现加载视图。

但是,当调用回调时(假设没有错误),组件的状态将会更新,组件将重新呈现。

这次服务将可用,并显示正确的视图。