React Router 4 - componentWillReceiveProps () not firing
I am using React Router 4.
When I process a component with renderWillReceiveProps () parameter it doesn't fire fist, so I need to double click it to send props to the component.
I am doing this:
const CartRoute = (props) => (<Cart itemsInCart = {this.state.itemsInCart} deleteItemFromCart = {this.deleteItemFromCart} {...props} />);
.....
<Switch>
.....
<Route path="/cart" render={CartRoute} />
</Switch>
Without a router (when all components are on the same page) it works fine.
Detailed description:
React router - need to double click LINK to pass props for component
source to share
I think the mind is just one, according to the DOC :
React does not call components componentWillReceiveProps with original props during montage. It calls this method only if some of the props components can Update. componentWillReceiveProps () is called before the mounted component receives new props.
componentWillReceiveProps
will not be called when the first component is first rendered, while componentDidMount
called when you make changes to props values, then only fires componentWillReceiveProps
. So, for the first time, if you want to do some calculations, do it in a method componentDidMount
, for example:
componentDidMount(){
console.log('props values', this.props); //it will print the props values
}
componentWillReceiveProps
is an update lifecycle method, not a mount method.
Mount methods:
These methods are called when a component instance is created and inserted into the DOM.
Update methods
The update can be triggered by changes in requisites or state. These methods are called when the component is re-rendered.
Check out the difference between installation method and lifecycle update.
source to share