在 meteor-react render() 方法中使用异步 meteor.call()

Question

我正在为我的应用程序使用 Meteor 和 React。在我的应用程序中，我使用 account-ui, account-facebook 让用户能够使用 facebook 帐户登录。现在，我想检查用户是否使用 facebook 登录或常规 user/pass 登录。我查看用户集合，发现

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

在服务器中，我有方法 return 登录服务（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 登录）还是（User/pass 登录），那么我可以相应地渲染屏幕

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 return 放入回调函数（错误，服务）但没有成功。

你知道怎么解决这个问题吗。或者你有什么更好的主意来识别用户用来登录的服务（可能是 account-facebook 的一个钩子）

Answer 1

首先将对 Meteor.call 的调用移动到 componentWillMount 中，以便它只运行一次 — 就在组件首次呈现之前。

每次 state 或 props 改变时，你的 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 子句中呈现加载视图。

但是，当调用回调时（前提是没有错误），组件的状态将被更新并且组件将重新渲染。

这次服务可用，并且会显示正确的视图。

在 meteor-react render() 方法中使用异步 meteor.call()

Using async meteor.call() in meteor-react render() method

javascript

asynchronous

meteor

reactjs

meteor-accounts