Как исправить, не ждет отклика, а начинает рендерить

Question

 areasGet = async(Index) => {
    let res = await fetch(`https://api.hh.ru/areas/113`)
    let json = await res.json()
    this.setState({
      areaData: json,
      isLoadArea: true
    })
     // console.log(json)
  }


  specGet = async(Index) => {
    let res = await fetch(`https://api.hh.ru/specializations`)
    let json = await res.json()
    this.setState({
      specData: json,
      isLoadSpec: true
    })
  }

  industriesGet = async(Index) => {
    let res = await fetch(`https://api.hh.ru/industries`)
    let json = await res.json()
    this.setState({
      industriesData: json,
      isLoadInd: true
    })
  }

  componentDidMount() {
    this.areasGet()
    this.specGet()
    this.industriesGet()
  }

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

Рендер () сам по себе работает, только если все 3 isLoad верны

Answer 1

Вам нужно подождать до всех из них и отметить для рендера, что он может рендериться, поэтому вы можете ввести свойство state, назовем его isLoaded.

Это значение должно начинаться с false и становиться true только после выполнения 3 запросов ajax.

У вас есть 2 варианта:

1. Асинхронно-ожидающий синтаксис
2. Promise.all

Пример:

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

  async componentDidMount() {
    await Promise.all([this.areasGet(), this.specGet(), this.industriesGet()]);
    this.setState({ isLoaded: true });
  }

  render() {
    const { isLoaded } = this.state;

    if (isLoaded) {
      return <div>Here is you component that needs all the 3 ajax requests</div>;
    } else {
      return <div>Loading...</div>;
    }
  }
}