React + Redux: Why are props populated on third ti

问题:

See my console log PROPS and the first two instances PROPS are empty then the third it is populated?

Why is that and is it possible to get around this so that the PROPS are populated on initial load?

My current stack for the application is React, Redux and using Axios to fetch JSON data from a CMS.

Screenshot:

EDIT!!!!!

Here is my edit of my component with render function - see Footer for getData method:

componentWillMount() {
        //Fetch Ad Products Data
        this.props.dispatch(fetchAdProductsData())

        //Fetch List Ad Products Data
        this.props.dispatch(fetchListAdProductData())

        //Fetch Fox Footer Data
        this.props.dispatch(fetchFoxFooterData());

    }


    getData(prop) {
        if (prop.data === undefined) {
            return [{}];
        }

        return prop.data;
    }


    render(){
        let foxFooterData = this.props.foxFooterData;
        let listAdProductsData = this.props.listAdProductsData;

        return (
            <div className="ad-products-wrap container no-padding col-xs-12">
                <Header />
                <HeroModule />
                <HeroDetail />
                <ProductCategoryLeft />
                <ProductCategoryNavigation />
                <ProductCategoryRight />
                <ShowcaseModule />
                <NewsModule />
                <ContactModule />
                <Footer data={this.getData(foxFooterData)} />
            </div>
        )
    }

回答1:

1.) Call FETCH_FOXFOOTER_DATA_COMPLETE componentDidMounthttps://reactjs.org/docs/react-component.html#componentdidmount.

2.) Remove this.getData() and leverage React's declarative nature. Inside the render function in your question pass props to <Footer/> and let that component handle missing props:

In <Footer/> :

render() {
  return (
    <footer>
      {props.data.length ? <DisplayDetailsThatNeedProps {...props} /> : <Loading />}
    </footer>
  )
}