简体   繁体   English

在React中使用Meteor订阅

[英]Using Meteor subscriptions in React

I am using React.js with Meteor.js , and am trying to use Meteor's subscribe within React, based on a blog post that I'm reading. 我正在将React.jsMeteor.js React.js使用,并根据我正在阅读的博客文章尝试在React中使用Meteor的订阅 My thinking here, and please correct me if I'm wrong (I am new to react) is that every time the database changes, specifically the wait collection, the front end will change to reflect this (I will eventually be finding a median value). 我在这里的想法是,如果我做错了,请纠正我(我是新来的人)是,每当数据库更改时,特别是wait集合,前端都会更改以反映这一点(我最终将找到一个中间值)。

However, I'm running into an issue with Meteor.subscribe('wait') , which is supposed to be returning a selection of the mongo collection, but is not. 但是,我遇到了Meteor.subscribe('wait') ,该问题应该返回选择的mongo集合,但不是。 This, I believe, is leading to the error message that I am currently getting, Uncaught TypeError: Cannot convert undefined or null to object . 我相信,这导致了我当前收到的错误消息, Uncaught TypeError: Cannot convert undefined or null to object When I log the returned data (as shown), I am just getting undefined . 当我记录返回的数据时(如图所示),我只是变得undefined I know the query works because when I run it inside of Meteor.isServer it returns one of the documents from the collection. 我知道查询有效,因为当我在Meteor.isServer中运行它时,它将返回集合中的文档之一。

So how can I use getMeteorData (shown below) to return data from the wait collection, and have it update the waitTime DOM object whenever there are changes (new documents added, etc.) to the database? 因此,如何使用getMeteorData(如下所示)从wait集合返回数据,并在对数据库进行更改(添加新文档等)时让它更新waitTime DOM对象?

Venue = React.createClass({
  render() {
    var self = this;
    var venueName = this.props.params.venueName;
    return (
      <div className='venue'>
        <h1>This is the Venue {venueName}</h1>
        <WaitTime />
        <div className='wait-time-chooser'>
          <div className="red" onClick={self.waitTime.bind(this,venueName,'red')}>RED</div>
          <div className="yellow" onClick={self.waitTime.bind(this,venueName,'yellow')}>YELLOW</div>
          <div className="green" onClick={self.waitTime.bind(this,venueName,'green')}>GREEN</div>
        </div>
      </div>
    );
  },
  waitTime(currentVenue,time) {
    sendWaitTime(currentVenue,time);
  }
});
function sendWaitTime(venue,time) {
  var userId = Meteor.user()._id;
  $.ajax({
    type: "POST",
    url: "/wait?venue=" + venue + "&wait=" + time + "&user=" + userId,
    success: function(response){
      console.log(response);
    },
    error: function(response){
      console.log("Error:" + JSON.stringify(response));
    }
  });  
}

WaitTime = React.createClass({
  mixins: [ReactMeteorData],
  render() {
    return (
      <div>
        <h3>WAIT TIME: {!$.isEmptyObject(this.data)? this.data.wait : <p>Loading...</p>}</h3>
      </div>
    );
  },  
  componentDidMount() {  
    // wait for task...
  },
  getMeteorData() {
    var data = {};
    var handle = Meteor.subscribe('wait');
    if(handle.ready()) {
      data.wait = Wait.findOne({});
      console.log(data);
    }
    return data;
  }  
});

Got it (thanks to the comments and reading this Meteor Doc ). 知道了(感谢评论并阅读了此Meteor Doc )。 Had to do the following on the server: 必须在服务器上执行以下操作:

if (Meteor.isServer) {
  Meteor.publish('wait', function waitPublication() {
    return Wait.find();
  });
}

I guess I had already removed autopublish , meteor remove autopublish , which comes with Meteor by default. 我猜我已经删除了autopublishmeteor remove autopublish ,默认情况下Meteor附带了它。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM