Components not updating reactively when Collection is udpated

[jazzdrive3]

Currently, it seems like a setState must be called in order to trigger a re-render. This may be by design for this package. However, given some of the content in the Meteor tutorials, it seems like the ideal functionality would be for a react component to be re-rendered if a Collection is updated, when its state depends on that Collection.

Even updates to Mongo via the command line should trigger a re-render, as it currently does with Blaze. Maybe another key could be added to the mixin?

[jazzdrive3]

I was able to get this to work by wrapping the React.render() in a Tracker.autorun() call. Now when the collection set in the state is updated, the component is rendered automatically as well.

Tracker.autorun(function () {
  React.render(<Component />, document.getElementById("id"));
});

Should this be added to the documentation?

[rkstar]

I'm having this issue as well. It seems to have happened after one of the most recent updates either to Meteor or this package (or dependencies).

I tried the Tracker.autorun fix mentioned above, but it did not work for me. I am using FlowRouter https://github.com/meteorhacks/flow-router/ not sure if that has anything to do with it. It worked perfectly previous to one of the last updates.

FlowRouter.route('/view/:id',{
  middlewares: [checkAuthorization, renderAppLayout],
  subscriptions: function(params, queryParams){
    this.register('feedSub', Meteor.subscribe('feed'))
  },
  action: function(params, queryParams){
    React.render(<View pid={params.id} />, document.getElementById('applayout_view'))
  }
})

calling code:

  getMeteorState: function(){
    return {
      feed: Feed.find({
        pid: this.props.pid
      }).fetch()
    }
  }

I have tried this code with and without .fetch() but it doesn't make a difference.

For what it's worth, I can see the feed collection has data in it using msavin:mongol package. I know that it's getting data, it's just not updating it. When I reload the page, data that was in the collection is now rendered to the page.

Is it possible it's being cached and not being updated?

[bitkidd]

+1
I have the same problem.

[bitkidd]

Ok, worked for me with fetch()

[nicksergeant]

Same here, had to change from this:

  getMeteorState: function() {
    return {
      teams: Teams.find({}, { sort: { createdAt: -1 }})
    };
  },

to this:

  getMeteorState: function() {
    return {
      teams: Teams.find({}, { sort: { createdAt: -1 }}).fetch()
    };
  },

[damonmcminn]

+1

Expected: reactive with cursor and cursor.fetch()
Actual: reactive with cursor.fetch(), not reactive with cursor

[savv]

A few things make react non-reactive:

• returning a cursor instead of .fetch() [in fact, meteor now prints a warning for this]
• throwing an exception seems to sometimes "break" the connection; in my case, I was throwing an exception if the user wasn't authorized; but even after the user logged in, my App didn't respond by showing the data.

[richkuo]

From the https://github.com/ultimatejs/tracker-react readme:
GOTCHA: You must call .fetch() on your cursors to trigger reactivity!!