Подождите, пока данные будут извлечены в дочерних компонентах, затем выполните рендеринг

Question

У меня есть приложение React, которое использует несколько вызовов выборки для разных компонентов.В компоненте «Домашняя страница» я импортировал более мелкие компоненты, каждый из которых имеет свой собственный вызов извлечения.

render() {
   return (
      <React.Fragment>
        <Banner/>
        <Services />
        <About />
      </React.Fragment>
    )
}

У Banner, Services и About есть свои собственные вызовы выборки для разных конечных точек, теперь мой вопрос в том, что ответ немного медленнее, как ждать, пока все дочерние компоненты извлекаютсяданные, а затем визуализировать компонент домашней страницы.Я попытался установить состояние isLoading и добавить загрузчик для ожидания загрузки компонентов, но я не знаю, чего ожидать, чтобы установить isLoading в false.

Answer 1

Используя обещания в выборке, вы, как и предполагалось, можете иметь состояние свойства isLoaded, определяющее, должен ли компонент отображаться или нет.

class ShouldRender extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoaded: false,
    }
  }

  componentDidMount() {
    fetch('http://someresource.com/api/resource')
      .then(res => res.json())
      .then(data => {
        this.state({
          data,
          isLoaded: true,
        });
      })
  }

  render() {
    const { isLoaded } = this.state;
    if (isLoaded) {
      return <MyAwesomeReactComponent />
    }
    return null;
  }
}

Таким образом, как только состояние обновляется, оно вызываетотобразится повторная визуализация компонента с новым состоянием, которое сделает оператор if истинным и вы JSX.

Answer 2

Как упомянул @TJCrowder в своем ответе, вам нужно поднять свое состояние и оставить его в родительском компоненте.Сделайте там сетевой запрос и передайте данные вашему дочернему компоненту в качестве реквизита.Вы можете прочитать больше о состоянии подъема здесь

class YourComponent extends React.Component {
  state = {isLoading: true, isError: false, banner: null, services: null, about: null};

  async componentDidMount() {
     try {
        const [banner, services, about] = await Promise.all([
           // all calls
        ]);
        this.setState({ isLoading: false, banner, services, about });
     } catch (error) {
        this.setState({ isError: true, isLoading: false });
     }

  }

  render() {
     if (this.state.isLoading) {
        return <div>Loading...</div>
     }

     return (
        <React.Fragment>
           <Banner data={this.state.banner} />
           <Services data={this.state.services} />
           <About data={this.state.about} />
         </React.Fragment>
       )
   }
}

Answer 3

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

Нет.Вместо этого вы перемещаете выборки в родительский компонент компонента Homepage, а затем этот родительский элемент отображает компонент Homepage только тогда, когда у него есть вся необходимая для этого информация.На языке React это " поднятие состояния " (например, по иерархии до родительского).

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