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

Question

我试图检索我的服务器数据集合的代码波纹管，但它只是返回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; 
 
    } 
 

我已经搜索的数据库手动那里我用命令有正确的返回：

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

Answer 1

我缶第二在@mostafiz拉赫曼的评论的解决方案，我应该把publish和subscribe，像这样：

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'); 
 
    }

Answer 2

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

Answer 3

我认为这是一个最好的解决方案那些使用Meteor /反应的连接器。我更喜欢react-komposer。

ü必须只是创建功能，允许反应跟踪流星集合改变：

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

这包装组件后：

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

欲了解更多信息，看看docs。