React + Redux:为什么在第三次加载时填充道具? [英] React + Redux: Why are props populated on third time load?

问题描述

请参阅我的控制台日志PROPS，并且前两个实例PROPS为空，然后填充了第三个实例?

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

为什么会这样，并且有可能解决这个问题，以便在初始加载时填充PROPS?

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

该应用程序的当前堆栈是React，Redux，并使用Axios从CMS获取JSON数据.

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

截屏:

编辑！！！！

这是我对带有渲染功能的组件的编辑-有关getData方法，请参见页脚:

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.)调用FETCH_FOXFOOTER_DATA_COMPLETE componentDidMount https://reactjs.org/docs/react-component.html#componentdidmount .

2.)删除this.getData()并利用React的声明性.在问题的render函数内部，将props传递给<Footer/>并让该组件处理缺少的props:

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:

在<Footer/>中:

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

这篇关于React + Redux:为什么在第三次加载时填充道具?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！