React - componentDidUpdate is called infinite time
I'm new to React and I feel like I haven't caught the component lifecycle thread, this is the component I have:
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import { fetchMyWishlist, fetchSpecificBook } from '../actions/index';
class Cart extends Component {
static contextTypes = {
router:PropTypes.object
};
constructor(props) {
super(props);
this.state = { currentCart:[], currentBook:[], wishlist:[] };
var self = this;
if (this.props.authenticated){
this.props.fetchMyWishlist(this.props.signedInUserInfo._id).then(function(data){
self.setState({ currentCart: data});
});
}
else {
this.context.router.push('/signin');
}
}
componentWillMount(){}
componentDidMount(){
// I get undefined here
console.log("component has been mounted: "+this.state.currentCart.payload);
}
componentDidUpdate(prevProps, prevState){
var jsonObj = this.state.currentCart.payload;
console.log("test: "+JSON.stringify(this.state.currentCart.payload));
var self = this;
if ((jsonObj) && (jsonObj.data)){
return jsonObj.data.map(function(book){
self.props.fetchSpecificBook(book.itemID);
});
}
}
render() {
console.log("rendering");
return (
<div>
<div>
<h3>Your wishlist</h3>
</div>
</div>
);
}
}
function mapStateToProps(state){
return {
currentCart: state.bookReducer.currentCart,
currentBook: state.bookReducer.currentBook,
authenticated: state.auth.authenticated,
signedInUserInfo:state.auth.signedInUserInfo
};
}
export default connect(mapStateToProps, {fetchMyWishlist, fetchSpecificBook})(Cart);
This is what I am doing: inside the constructor, an action is called fetchMyWishlist
and returns an array of book IDs. The reducer updates the state currentCart
with the result of the action fetchMyWishlist
.
First, I don't understand why this.state.currentCart.payload
there is undefined in the componentDidMount . So I try to do my operations inside componentDidUpdate
where is this.state.currentCart.payload
defined and I can iterate through it. Here, for each book, I try to get more information with an action fetchSpecificBook
. The problem here is that I am getting an infinite number of action calls. What I would like to do is store all the extra book information into an array.
How should I do it?
source to share
Why is there undefined in the componentDidMount this.state.currentCart.payload?
Once inside the constructor, you can simply set the state like this:
constructor(props) {
super(props);
this.state = {
...
};
}
Your selector should provide you with the data you want as props () when installing the component. Are you managing storage and therefore getting new props that lead to an infinite re-rendering loop?
source to share
The constructor is not a good place to retrieve and set up state. I suspect this is the root of your problem. Try it instead componentWillMount
.
state = {
currentCart: [],
currentBook: [],
widhlist: []
};
componentWillMount() {
const { authenticated, fetchMyWishlist, signedInUserInfo } = this.props;
if (authenticated){
fetchMyWishlist(signedInUserInfo._id).then(function(data){
this.setState({ currentCart: data});
});
}
}
componentDidMount(){
console.log("component has been mounted: "+this.state.currentCart.payload);
}
source to share