如何确保 React 父组件在其子组件挂载之前加载数据？

Question

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

当布局挂载时，我正在调用异步 Redux 操作创建器以从数据库中获取事件类别列表。当它们被检索到时，它们会保存在 Redux 存储中，并将 Selected 属性设置为 true，因为它们都是在初始加载时被选中的。

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

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

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

问题是，当月视图去抓取该月的事件时，选定的类别列表总是空的。所以它不会选择任何东西，因为没有选择任何类别。

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

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

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

Answer 1

你可以这样试试

当数据可用时设置isDataLoaded。

使用三元运算符进行条件渲染。

在你渲染中

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

        ....other sutff
   </>
);

使用也可以使用&&操作符

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

Answer 2

您可以集成 componentDidUpdate() 并使用它以某种同步的流程呈现您的子组件。

假设您的父组件的结构应该如下所示：

家长

class Parent extends React.Component{
   state = {
      renderChildren: false
   }

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

   componentDidUpdate(prevProps){
      if(this.props.yourUpdatedReducer !== prevProps.yourUpdatedReducer){
         this.setState({
            renderChildren: true
         })
      }
   }

   render(){ 
       const { renderChildren } = this.state 
       return(
         { renderChildren ? <Child/> : "Loading" }
       )
   }
}

• 您需要在您的状态中确定您是否应该 渲染子组件。
• 在componentDidMount() 中，您调用action-creator 函数，当 完成后，您将获得更新的道具。
• 使用更新的道具，你触发componentDidUpdate()，你 检查减速器中的值。如果值是 不同，这意味着您从数据库中获取了更新的数据，所以 一切都已加载。
• 太好了，所以现在你想挂载你的子组件，所以你 update-state，将 renderChildren 设置为 true，从而重新渲染 父组件。现在 Child 被渲染并且应该像预期的那样运行。