Как я могу убедиться, что родительский компонент React загружает данные перед монтированием его дочернего компонента?

Question

Я пишу простое приложение-календарь, которое использует общий макет для переноса различных представлений о событиях (в представлении месяца отображается большой календарь со всеми днями месяца и событиями для каждого дня, в представлении недели - только вертикальный списоксобытия на эту неделю и т. д.).Общий макет включает в себя элемент управления выбора календаря для выбора даты, а затем список категорий событий, которые можно включить или отключить для отображения событий, связанных со спортом, развлечениями и т. Д.

Когда макет монтируется, я 'm вызвать асинхронного создателя действий Redux, чтобы получить список категорий событий из базы данных.Когда они извлекаются, они сохраняются в хранилище Redux со свойством Selected, установленным в значение true, поскольку все они выбираются при начальной загрузке.

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

Когда отображается представление месяца, которое является дочернимиз макета, монтирует, он захватывает все события за данный месяц.Частью процесса выбора получения этих событий является отправка списка выбранных категорий событий на сервер, поэтому он получает события только из выбранных категорий.

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

Проблема в том, что список выбранных категорий всегда пусткогда представление месяца идет, чтобы захватить события за месяц.Так что он ничего не выберет, так как категории не выбраны.

Кажется, единственный способ, которым это может произойти, - это если дочерний компонент монтируется первым или если родительский компонент занимает так много времени, чтобы получить событиекатегорий, которые сначала завершает процесс getWeeks (это маловероятно, поскольку процесс захвата недель и дней и их событий гораздо более сложен, чем просто выбор списка категорий событий).

Итак, как я могу убедиться, чтородительский компонент извлекает категории событий из базы данных и помещает их в хранилище Redux до того, как дочерний компонент выберет свои события?

Я знаю один способ, возможно, лучший способ сделать это, это иметь списоккатегории событий отображаются на странице на стороне сервера, поэтому она уже присутствует при начальной загрузке.Я, вероятно, в конечном итоге сделаю это таким образом, но я также хотел бы знать, как сделать все это с помощью действий на стороне клиента, на случай, если мне понадобится сделать это таким же образом в будущем.

Answer 1

Вы можете интегрировать componentDidUpdate() и использовать его для рендеринга ваших дочерних компонентов в несколько синхронном потоке.

Скажем, структура вашего родительского компонента должна выглядеть примерно так:

Parent

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(), где вы проверяете значения в вашем редукторе.Если значения отличаются, это означает, что вы получили обновленные данные из своей базы данных, поэтому все загружено.
• Отлично, теперь вы хотите смонтировать ваш дочерний компонент, поэтому вы обновляете состояние, устанавливая renderChildren в true,таким образом повторно рендеринг родительского компонента.Теперь Child получает рендеринг и должен вести себя как положено.

Answer 2

Вы можете попробовать вот так

Установить isDataLoaded при наличии данных.

В вашем рендере

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

        ....other sutff
   </>
);