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

Question

import React from "react";

class Admin extends React.Component {
  state = {
    isFetching: true


  }

  componentDidMount = () => {

    this.getProfile()
    this.getPost()
    this.setState({isFetching: false})




  }

 getProfile = () => {
     fetch(url)
     .then (fetch stuff)

 }


 getPost = () => {
     fetch(url)
     .then (fetch stuff)

 }


  render() {

    if (this.state.isFetching) {
      return <div>Loading...</div>
    } else {
      return (

        <div>



        </div>

      );
    }
  }
}

export default Admin;

Цель состоит в том, чтобы получить все мои данные и затем выполнить рендеринг. Я установил для состояния isFetching значение true, чтобы оно возвращало только время загрузки, потому что при рендеринге происходит ошибка.

Этот текущий код не работает. Он по-прежнему отображает не полностью данные, полученные не полностью. Как сделать так, чтобы isFetching стал ложным только после получения всех данных. (У меня 2 функции выборки)

Answer 1

использовать async / await для выборки

 getProfile = async () => {
     const profile = await fetch(url)
     return profile //or whatever you need to do with it

 }

 getPost = async () => {
     const post = await fetch(url)
     return profile //or whatever you need to do with it

 }