Meteor 订阅首先获取空数据然后获取真实数据答案

【问题标题】：Meteor subscribe first fetch empty data then real dataMeteor 订阅首先获取空数据然后获取真实数据
【发布时间】：2017-11-02 02:53:56
【问题描述】：

我在服务器端发布数据，但是当我订阅数据时，我先是空的，然后是真实的数据。一开始如何订阅真实数据？

class BlogItem extends Component{
  render(){
      console.log(this.props.posts);
      return(
        this.props.posts.map(post =>{
          return(
            <li className="list-group-item" key={post._id}>
              title:{post.title}
            </li>
          );
        })
      );
  };
}


export default createContainer((props) => {
  Meteor.subscribe('posts');
  return { posts: Posts.find({}).fetch() };
}, BlogItem);

在服务器上发布：

Meteor.startup(() => {
  Meteor.publish('posts', function() {
   return Posts.find({});
 });
});

【问题讨论】：

如何在服务器端发布
更新问题。谢谢！
也许它试图在订阅准备好之前返回一些东西？我不太了解如何在反应中使用subscriptionReady()，但请尝试阅读this。
查看stackoverflow.com/questions/28890672/…
已修复，忽略空数组，当真实数据到来时会重新渲染。

标签： reactjs meteor

【解决方案1】：

没有办法让数据更快地到达客户端。这就是订阅的工作方式。为了处理它，使用订阅句柄来测试它是否准备好并同时显示一个加载器。

class BlogItem extends Component {
  render() {
    const {ready, posts} = this.props;
    if (!ready) return (<div>loading...</div>);
    return (
      <ul>
        posts.map(post => (
          <li className="list-group-item" key={post._id}>
            title:{post.title}
          </li>
        ));
      </ul>
    );
  }
}

export default createContainer(() => {
  const handle = Meteor.subscribe('posts');
  return {
      ready: handle.ready(),
      posts: Posts.find({}).fetch(),
  };
}, BlogItem);

【讨论】：

已修复，只是忽略了空数组，当真实数据到来时会重新渲染。
您可以这样做，但假设您的容器有 25 个不同的返回值。测试它们中的每一个，无论它们是 emptz 还是 undefined 都会非常乏味。所以使用subscription-handle，这就是它的用途。

【解决方案2】：

您需要等待订阅完成。

最初你得到的是空数据，因为你的数据还没有准备好。

等到你的数据准备好再传数据，同时显示加载页面

export default createContainer((props) => {
  const handle = Meteor.subscribe('posts');
  if (handle.ready()) {
   return { posts: Posts.find({}).fetch() };
  } else {
    return { loadingData: true, posts: [] }
 }
}, BlogItem);

【讨论】：

已修复，只是忽略了空数组，当真实数据到来时会重新渲染。