Question

请参阅我的控制台日志PROPS，前两个实例PROPS是空的，然后填充第三个实例？

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

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

截图：

EDIT !!!!!

这是我使用渲染功能编辑我的组件 - 请参阅geter for getData方法：

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

Answer 1

1。）致电FETCH_FOXFOOTER_DATA_COMPLETE componentDidMount https://reactjs.org/docs/react-component.html#componentdidmount。

2。）删除this.getData()并利用React的声明性质。在你的问题中的渲染函数内部传递道具到<Footer/>并让该组件处理丢失的道具：

在<Footer/>：

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

React + Redux：为什么在第三次加载时填充道具？

1 个答案: