title: React - componentDidUpdate called infinite times
body: <p>I'm new to React and I feel I didn't catch the component lifecycle flow, this is the component I have:</p>
  
  <pre><code>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) &amp;&amp; (jsonObj.data)){   
        return jsonObj.data.map(function(book){
            self.props.fetchSpecificBook(book.itemID);
        });
      }
    }
  
  
    render() {
      console.log("rendering");
  
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;h3&gt;Your wishlist&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  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);
  </code></pre>
  
  <p>This is what I'm doing: inside the constructor the action <code>fetchMyWishlist</code> is called and it returns an array of book ids. The reducer updates the <code>currentCart</code> state with the result of <code>fetchMyWishlist</code> action.</p>
  
  <p>First thing I don't understand is why in componentDidMount <code>this.state.currentCart.payload</code> is undefined.
  So I try to do my operations inside <code>componentDidUpdate</code> where <code>this.state.currentCart.payload</code> is defined and I can iterate through it.
  Here for each book I try to retrieve additional information via <code>fetchSpecificBook</code> action.
  The problem here is that I get infinite number of action calls.
  What I'd like to do is to store all additional books information into an array.</p>
  
  <p>How do I go about this? </p>