Question

我在服务器端发布了数据，但是当我订阅数据时，我首先得到空数然后是真实数据。我如何首先订阅真实数据？

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({});
 });
});

Answer 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);

Answer 2

您需要等待订阅完成。

最初，由于您的数据尚未就绪，您将获得空数据。

等待数据准备就绪然后传递数据，同时显示加载页面

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

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

2 个答案: