React - componentDidUpdate调用无限次

Question

I'm new to React and I feel I didn't catch the component lifecycle flow, 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'm doing: inside the constructor the action fetchMyWishlist is called and it returns an array of book ids. The reducer updates the currentCart state with the result of fetchMyWishlist action.

First thing I don't understand is why in componentDidMount this.state.currentCart.payload is undefined. So I try to do my operations inside componentDidUpdate where this.state.currentCart.payload is defined and I can iterate through it. Here for each book I try to retrieve additional information via fetchSpecificBook 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.

How do I go about this?

Answer 1

Why in componentDidMount this.state.currentCart.payload is undefined?

When you are inside a constructor, you can simply set the state like this:

constructor(props) {
    super(props);
    this.state = {
        ...
    };
}

Your selector should give you the data you need as props() when the component is mounted. Are you manipulating the store and therefore get new props which is resulting in an infinite re-render loop?

Answer 2

The constructor is not a good place to be fetching and setting state. I suspect that's the root of your issue. Try componentWillMount instead.

  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);
  }

Answer 3

1. don't call setState in constructo. you should use this.state = ...
2. add this.componentDidMount = this.componentDidMount.bind(this) to constructor.