Множественные запросы на выборку с setState в React и круговой диаграмме

Выполнение моего запроса занимало более 2 минут, и с этого момента в браузере истекло время ожидания. Итак, теперь я сломал запрос и теперь работаю как отдельный API, что полезно, но теперь я не знаю, как обрабатывать эти три запроса, чтобы он мог отображать данные.

Примечание. Данные API сохраняются в компоненте «Состояние» реакции, здесь это «Данные».

Теперь у меня есть логика, но может ли кто-нибудь дать мне направление, как ее реализовать.

Логика: перед сохранением результата API непосредственно в компоненте состояния мы можем сохранить его в другом массиве, затем мы можем выполнить итерацию по этому массиву для использования круговой диаграммы, после чего эти данные могут быть сохранены в компоненте состояния, который можно использовать для рендеринга. круговая диаграмма в функции «Отрисовка».

Здесь я делаю три разных вызова API одновременно и сохраняю их, здесь результат API напрямую сохраняется в компоненте состояния:

componentDidMount() {
    Promise.all([
      fetch("http://localhost:4000/api/EMEA/E_claimQuarter"),
      fetch("http://localhost:4000/api/EMEA/E_claimQuarter1"),
      fetch("http://localhost:4000/api/EMEA/E_claimQuarter2")
    ])
      .then(([res1, res2, res3]) => 

      Promise.all([res1.json(), res2.json(), res3.json()]))

      .then(([data1, data2, data3]) => 

        this.setState({
          // Data: data1, data2, data3,
          Data: {
            labels: [
              "FY19 Q1[NOV-JAN]",
              "FY19 Q2[FEB-APR]",
              "FY18 Q3[SEP-NOV]"
            ],
            datasets: [
              {
                label: "",
                data: data1,
                backgroundColor: [
                  "rgba(255,105,145,0.6)",
                  "rgba(155,100,210,0.6)",
                  "rgb(63, 191, 191)"
                ]
              }
            ]
          }
        })
      );
  }

Вот как вы обрабатываете API формы данных и проходите через него, а затем визуализируете эти данные для различных диаграмм, которые в моем случае представляют собой круговую диаграмму:

ComponentDidMount() {
    axios.get(`http://localhost:4000/api/APJ/A_claimQuarter`)
***************************************************************
    .then(res => {
          const claims = res.data;
          let claim = [];

          claims.forEach(element => {
            claim.push(element.CNT1);

          });
********************************************************************
          this.setState({ 
            Data: {
              labels: ['FY19 Q1[NOV-JAN]','FY19 Q2[FEB-APR]','FY18[SEP-NOV]'],
              datasets:[
                 {
                    label:'',
                    data: claim ,

                    backgroundColor:[
                     'rgba(255,105,145,0.6)',
                     'rgba(155,100,210,0.6)',
                     'rgb(63, 191, 191)'

                  ]
                 }
              ]
           }
           });
       })
}