Question

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

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

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

安装作为布局视图的子视图的月视图时，它将捕获给定月的所有事件。选择这些事件的部分选择过程是将所选事件类别的列表发送到后端，以便仅从所选类别中获取事件。

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

问题是，当月视图去获取该月的事件时，所选类别列表始终为空。因此，由于没有选择类别，因此不会选择任何内容。

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

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

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

Answer 1

您可以集成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" }
       )
   }
}

您想要一个状态为您确定是否应该使用的钥匙呈现Child组件。
在componentDidMount()中，当完成后，您将获得更新的道具。
使用更新的道具，您将触发componentDidUpdate() 检查减速器中的值。如果值是不同意味着您从数据库中获取了更新的数据，因此一切都已加载。
太好了，所以现在您想挂载Child组件，所以您更新状态，将renderChildren设置为true，从而重新渲染父级组件。现在，Child被渲染，并且应该表现出预期的效果。

Answer 2

您可以尝试这样

在有数据时设置isDataLoaded。

在您渲染

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

        ....other sutff
   </>
);

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

2 个答案:

父母