如何使用React从客户端的Meteor集合中检索数据？

I'm trying to retrieve my server data of a collection with the code bellow, but it just return undefined.

我正在尝试使用下面的代码检索集合的服务器数据,但它只返回undefined。

import { Posts } from '../../../api/posts.js';

class FeedUnit extends Component {

  constructor(props) {
      super(props);

      this.state = {
          open: true,
          emojis: false,
          isOver: false,
          likes: this.setLike(),
      };
  }
  
    setLike(){
    let self = this;
    let like;

    let post = Posts.findOne({ external_id: this.props.data.id });
    console.log(Posts.findOne({}))
    return like;
  }

I already search on the data base manually and there I had the correct return using the command:

我已经手动搜索了数据库,并使用以下命令获得了正确的返回:

db.posts.findOne({external_id: '1402366059774445_1503319816345735'})

3 个解决方案

#1

I found the solution in the comment of @mostafiz rahman, I should put the publish and subscribe, like this:

我在@mostafiz rahman的评论中找到了解决方案,我应该发布和订阅,如下所示:

if (Meteor.isServer) {
  // This code only runs on the server
  // This is necessary to reatrieve data on the client side
  Meteor.publish('posts', function tasksPublication() {
    return Posts.find();
  });
}

  componentDidMount() {
    Meteor.subscribe('posts');
  }

#2

I think is a best solution that use some connector for Meteor/react. I prefer react-komposer.

我认为是使用Meteor / react的一些连接器的最佳解决方案。我更喜欢react-komposer。

U must just create function that allow react to track changes in Meteor collection:

U必须创建允许对Meteor集合中的更改进行响应的函数:

function getTrackerLoader(reactiveMapper) {
  return (props, onData, env) => {
    let trackerCleanup = null;
    const handler = Tracker.nonreactive(() => {
      return Tracker.autorun(() => {
        // assign the custom clean-up function.
        trackerCleanup = reactiveMapper(props, onData, env);
      });
    });

    return () => {
      if(typeof trackerCleanup === 'function') trackerCleanup();
      return handler.stop();
    };
  };
}

And after that wrap component:

之后的换行组件:

    import { Posts } from '../../../api/posts.js';

        class FeedUnit extends Component {

          constructor(props) {
              super(props);

              this.state = {
                  open: true,
                  emojis: false,
                  isOver: false,
                  likes: this.setLike(),
              };
          }

            setLike(){
              let self = this;
              let like;

              let post = this.props.post
              console.log(post)
              return like;
          }
}
function reactiveMapper(props, onData) {
    if (Meteor.subscribe('posts').ready()) {
        let post = Posts.findOne({ external_id: props.data.id });
        onData(null, { post });
    }
}

export default compose(getTrackerLoader(reactiveMapper))(FeedUnit);

For more information look the docs.

有关更多信息,请查看文档。

#3

Posts.findOne is async function you need either to get data from callback or by promise as below 
 Posts.findOne({ external_id: this.props.data.id })
.then((posts)=>{
//do whatever you want
})
.catch(err=>console.log(err))

#1