How to do something when a component has received props

Question

I have a react-router app that mounts User on /users. It works fine.

I then click a /users?page=2 link that passes in new props. Here getData uses this.props.location.query. So calling getData from componentWillReceiveProps will fetch stuff from page 1 instead of page 2.

I would have used componentHasReceivedProps method if it existed. What can I actually do?

 componentWillMount: function(){ this.setState({data:null}); this.getData(); }, componentWillReceiveProps: function(nextProps){ this.setState({data:null}); this.getData(); },

Mike Driver · Accepted Answer · 2015-10-01 08:22:25Z

Couple things.

1) Using this.setState synchronously inside componentWillMount works, but serves no purpose since you might as well have just done this inside of getInitialState instead.

2) If you want to react to props changes like this, you need to use the nextProps object inside componentWillreceiveProps. A simple fix is to change your getData method to allow the passing of nextProps to it. Such as:

getData: function(nextProps) { var props = nextProps || this.props; // your getData stuff }

And then pass it in your componentWillReceiveProps method as this.getData(nextProps).

Collectives™ on Stack Overflow

How to do something when a component has received props

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related