React component lifecycle issue

[keiranvv]

When using componentWillUpdate(nextProps, nextState), this.props is already set to the nextProps value.

According to this page: https://react-in-meteor.readthedocs.org/en/latest/meteor-data/ this.props should only be updated after that function is called. It actually seems to update before any of the functions listed on that page have been invoked.

Is there possibly another function I need to call when using MeteorFlux?

[luisherranz]

I don't quite understand your situation. Could you please share more details?

[keiranvv]

Sure. I'll show you a code example of what I'm trying to do:

//TaskStore.js
State.modify('tasks', () => {
  return Tasks.find().fetch()
})

// TaskListComponent.js
TaskList = React.createClass({
  mixins: [ReactMeteorData],
  getMeteorData() {
    return {
      tasks: State.get('tasks')
    }
  },
  render() {
    return (
      <ul>
        {
          this.data.tasks.map(t => {
            return <Task task={t} />
          })
        }
      </ul>
    )
  }
})

//TaskComponent.js
Task = React.createClass({
  componentWillUpdate(nextProps, nextState) {
    // this.props.task should be the previous props object
  },

  render() {
    return (
      <li>{this.props.task.name}</li>
    )
  }
})

If you look in the componentWillUpdate function in my Task component, this.props.task should be the task before the update happens, with nextProps being the one to be applied.

The problem I'm having is that this.props.task is already set to the new value, when in the Meteor/React documentation it states that this.props only gets set after componentWillUpdate is called.

Hope this helps?

[luisherranz]

I see.

So if you do

getMeteorData() {
    return {
      tasks: Tasks.find().fetch()
    }
  },

does it work?

[keiranvv]

That seems to work.

Is this the way I should be doing it?

[luisherranz]

Not really. I just want to know if the problem is with ReactiveState or not.

What if you do this?

meteor add reactive-dict

then:

// TaskListComponent.js
var state = ReactiveDict('state');
Tracker.autorun(function() {
  var tasks = Tasks.find().fetch();
  state.set('tasks', tasks);
});

TaskList = React.createClass({
  mixins: [ReactMeteorData],
  getMeteorData() {
    return {
      tasks: state.get('tasks')
    }
  },
 ... // everything like the one you posted

[ghost]

i ran into the same issue. shouldComponentUpdate has already the new props:

Actions = React.createClass({
    mixins: [ReactMeteorData],

    getMeteorData() {
        return {
            actions: State.get('Actions')
        };
    },

    render() {
        const { actions } = this.data;

        return (
            <div className="content-menu">
                <ActionsMenu actions={this.data.actions}/>
            </div>
        );
    }
});

and in ActionsMenu:

ActionsMenu = React.createClass({
    PropTypes: {
        actions: React.PropTypes.object
    },

    shouldComponentUpdate(nextProps, nextState) {
        console.log(this.props.actions);
        console.log(nextProps.actions);

        return nextProps.actions !== this.props.actions;
    },

    render() {
...
}