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

Posted 2023-03-28

【中文标题】React + Redux：为啥在第三次加载时填充道具？

【英文标题】：React + Redux: Why are props populated on third time load?React + Redux：为什么在第三次加载时填充道具？

【发布时间】：2018-04-12 21:52:33

【问题描述】：

查看我的控制台日志 PROPS，前两个实例 PROPS 为空，然后第三个实例填充？

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

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

截图：

编辑！！！！！！

这是我对带有渲染功能的组件的编辑 - 请参阅页脚了解 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>
        )
    

【问题讨论】：

在初始加载时填充道具会减慢渲染过程。但如果你愿意，你可以在componentWillMount hook 上调用它。

我有一个独立于 componentWillMount 生命周期的调度动作，我正在将调度映射到道具等。向您展示其他代码片段是否有助于@ArchNoob

有可能，很多时候...我建议您实现shouldComponentUpdate 方法，以便仅在某些道具或某些状态更改时呈现...

@assembler 但是如果不在 componentWillMount 中，我什么时候使用调度来获取 JSON 数据？

@Flith in componentDidMount

【参考方案1】：

1.) 致电FETCH_FOXFOOTER_DATA_COMPLETEcomponentDidMounthttps://reactjs.org/docs/react-component.html#componentdidmount。

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

在<Footer/>：

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

【讨论】：

你能告诉我一个如何做到这一点的例子吗？对 fetchFoxFooterData 的调用是在 componentWillMount 方法中完成的。

请参阅我上面的编辑，也根据文档使用componentDidMount 获取数据reactjs.org/docs/react-component.html#componentdidmount

我已经用我的整个组件功能进行了编辑 - 希望这会有所帮助

@Filth 请用您的代码编辑您的问题，而不是我的答案

@Filth 相应地更新了这个答案以更具体