如何使用Meteor和React加载数据?

时间:2016-07-21 04:43:22

标签: meteor reactjs react-router meteor-react

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

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

我应该使用状态而不是道具,并在componentWillMountcomponentWillMount中加载数据吗?到目前为止,这些对我没有用。我也尝试使用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);

1 个答案:

答案 0 :(得分:0)

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

这使您的UI组件可以轻松重复使用,无论您希望如何添加数据。

要了解如何加载(反应)数据,了解presentational and container components之间的概念/差异非常有用。

下一步是使用您选择的包装/呈现UI组件的技术创建容器组件。流星指南的createContainer是现在的事实上的方法。还有其他选项,例如Mantra(有人说更好但更复杂)。