【问题标题】:When using Mongo collections in Meteor React app, returning an empty array []在 Meteor React 应用程序中使用 Mongo 集合时,返回一个空数组 []
【发布时间】:2016-05-27 07:54:01
【问题描述】:

在 Meteor React 应用程序中使用 Mongo 集合时,返回一个空数组 []。 我使用的是 Github 的 "react-meteor-template"

我声明了

Posts = new Mongo.Collection("posts");

在 Collection.js 文件中。

下面是我得到空数组[]数据的地方

ReadPost = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData() {
        return {
            postsLoading: Posts.find().fetch()
        }
    },
    render() {
        let { postsLoading } = this.data;
        console.log(postsLoading);
       return (
               <div className="container">
                   {
                       postsLoading.map((post) => {
                           return (
                               <div key={post._id} className="col-sm-6 col-sm-offset-3" style={{'marginBottom':"30px", padding: "20px", background: "#FFBABA"}}>
                               <p>Reading post {this.props.postName}</p>
                               <h1 style={{display: "inline"}}>{post.title}</h1>
                               </div>
                           )
                       })
                   }

               </div>
       )
    }
});

【问题讨论】:

  • 我不知道 React 是如何工作的,但是在 Meteor 中你应该检查你的订阅是否设置正确。
  • 我必须使用订阅吗?
  • 如果您使用自动发布,那么不,您不必订阅。但即便如此,服务器响应可能需要时间才能到达客户端:这可能解释了空数组。加载页面后,从控制台运行Posts.find().fetch(),查看数据是否实际加载到 minimongo 数据库中。

标签: javascript mongodb meteor reactjs meteor-react


【解决方案1】:

虽然我们倾向于使用带有 blaze/iron:router 的路由/模板订阅,但我们通常订阅 Blaze 中的组件。

下面是我们在一个项目中使用的一段代码:

getMeteorData() {
        let subscription = Meteor.subscribe('usersList', this.state.limit);
        return {
            subscription: subscription.ready(),
            users: Meteor.users.find({}, {sort: {createdAt: -1}}).fetch()
        };
}

您现在可以在render() 中检查订阅准备情况,并且数据通常应该正在加载。请注意,如果您愿意,您仍然可以从 flow-router 订阅。

【讨论】:

  • 但是如果我使用自动订阅,我必须订阅吗?
  • 通常不会。您是否尝试在meteor shell 中加载您的收藏?
猜你喜欢
  • 1970-01-01
  • 2021-01-14
  • 2016-07-20
  • 2022-12-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-05-07
相关资源
最近更新 更多