如何使用 Meteor 和 React 加载数据？答案

【问题标题】：How to load data with Meteor and React?如何使用 Meteor 和 React 加载数据？
【发布时间】：2016-07-21 14:20:49
【问题描述】：

我正在使用 Meteor 1.3.5 和 React 15.1.0 并试图了解从 MongoDB 加载和订阅数据的正确方法。

现在我在createContainer 中使用参数执行此操作，并且在等待数据可用时遇到问题。

我应该使用状态而不是道具，并将数据加载到componentWillMount 或componentWillMount 中吗？到目前为止，这些对我不起作用。我也尝试过使用 getMeteorData，但是当组件渲染时它什么也没做。

我正在寻找一种能够在新数据到来时更新组件的解决方案。谢谢

import React, {Component, PropTypes} from "react";
import ReactDOM from "react-dom";
import { createContainer } from "meteor/react-meteor-data";


export default class UsersComponent extends Component{

  render(){
    let users = this.props.users;
    console.log(users);

    return (
      <div>
        {
          (users)?
            (users.map((user, i) => (
              <div key={user._id}>
                <p>{user.name}</p>
              </div>
            )))
          : null
        }
      </div>
    )
  }
}


UsersComponent.propTypes = {
  users: PropTypes.array.isRequired,
}

export default createContainer(({ params }) => {

  return {
    users: Meteor.users.find().fetch(),
  };
}, UsersComponent);

【问题讨论】：

您能否详细说明您遇到的问题是什么？ createContainer 应该在数据准备好后立即将数据提供给您的 UsersComponent。您是否在服务器上发布了用户数据？

标签： meteor reactjs react-router meteor-react

【解决方案1】：

避免使用 React 的 state 通过 Meteor 管理数据。相反，创建仅使用 props 的无状态功能组件。阅读这些：

这使您的 UI 组件易于重用，无论您希望如何加载数据。

要了解如何加载（反应式）数据，了解presentational and container components 之间的概念/区别很有用。

下一步是使用您选择的封装/呈现 UI 组件的技术来创建容器组件。 Meteor guide 的createContainer 是目前事实上的方法。还有其他选项，例如Mantra（有人说更好但更复杂）。

【讨论】：