Reactjs 如何确保父组件在其子组件装载之前装载数据？

我正在编写一个简单的日历应用程序，它使用一个通用的布局来包装事件的不同视图（月视图显示一个较大的日历，其中包含一个月的所有日期和每天的事件，周视图仅显示该周事件的垂直列表，等等）。通用布局包括用于选择日期的日历选择器控件，以及可选中或取消选中的事件类别列表，以显示与体育、娱乐等相关的事件

当布局挂载时，我调用一个异步Redux操作创建者从数据库获取事件类别列表。当检索到这些内容时，它们将保存在Redux存储中，属性Selected设置为true，因为它们在初始加载时都已选中

async componentWillMount() {
    await this.props.getEventTypes();
}

当月份视图（布局视图的子视图）挂载时，它将捕获给定月份的所有事件。获取这些事件的选择过程的一部分是将所选事件类别的列表发送到后端，以便只从所选类别获取事件

async componentWillMount() {
    await this.props.getWeeks();
}

问题是，当月份视图获取当月的事件时，所选类别列表始终为空。所以它不会选择任何东西，因为没有选择任何类别

似乎发生这种情况的唯一方法是，如果子组件首先装入，或者如果父组件花费很长时间来获取事件类别，以致getWeeks进程首先完成（这不太可能，因为获取周和天及其事件的进程比仅选择事件类别列表要复杂得多）

那么，如何确保父组件从数据库中获取事件类别，并在子组件选择其事件之前将其放入Redux存储中

---

我知道这样做的一种方法，可能是最好的方法，就是将事件类别列表呈现到服务器端的页面中，这样它在初始加载时就已经存在了。我可能最终会这样做，但我也想知道如何通过客户端操作来完成这一切，以防将来出于某种原因需要这样做。

您可以集成

componentdiddupdate（）

并使用它以某种同步流呈现子组件

假设父组件的结构应类似于以下内容：

父母亲

类父级扩展React.Component{
状态={
renderChildren:false
}
异步组件didmount（）{
等待此消息。props.getEventTypes（）；
}
componentDidUpdate（prevProps）{
if（this.props.yourUpdatedReducer！==prevProps.yourUpdatedReducer）{
这是我的国家({
renderChildren：对
})
}
}
render（）{
const{renderChildren}=this.state
返回(
{renderChildren？：“正在加载”}
)
}
}

• 您希望在您的状态中有一个键，该键决定您是否应该 渲染子组件
• 在

  componentDidMount（）

  中，当 完成后，您将获得更新的道具
• 使用更新的道具，您将触发

  componentdiddupdate（）

  ，其中 检查减速器中的值。如果值为 不同的是，这意味着您从数据库中获得了更新的数据，所以 所有东西都装上了
• 很好，现在你想挂载你的子组件，所以你 更新状态，将renderChildren设置为true，从而重新呈现 父组件。现在，子对象将被渲染，其行为应符合预期
你可以这样试试
当数据可用时，设置

isDataLoaded

使用三元运算符进行条件渲染
在你的渲染中

return(
    <>
        ....
      { isDataLoaded ? <ChildComponent /> : null }

        ....other sutff
   </>
);

---

我刚刚给你写了一份解决方案，告诉你如何解决这个问题。如果有帮助，请告诉我。天哪，我想已经成功了！我曾想过对子组件进行有条件的呈现，但我读到一些东西说它的componentDidMount事件无论如何都会触发，所以我没有尝试。谢谢欢迎光临@Jet！我很高兴这对你有用！：）

return(
    <>
        ....
      { isDataLoaded ? <ChildComponent /> : null }

        ....other sutff
   </>
);

 return(
        <>
            ....
          { isDataLoaded && <ChildComponent /> }
    
            ....other sutff
       </>
    );