Как дождаться выполнения цикла в react и вывести компонент?

Question

[Дмитрий]

тут по циклу 10 раз делается запрос и данные записываются в массив обьектов для выведения информации в таблицу.

<ApolloConsumer>
        {client => {
          return (
            <Query 
              query={GET_SEASON_TICCKET_INFO} 
              variables={QueryVar} 
              onError={() => this.props.history.push('/admin/price-template')}
            >
              {({ data, loading, error }) => {
                if (loading) return false;
                if (error) {
                  return (
                    <code>
                      <pre>{error}</pre>
                    </code>
                  );
                }
                const { tickets } = data.seasonTicketDescriptor.getById;
                let dataForTable = [];
                let datas;
                datas = tickets.list.map(item => {
                  const { visibleId, price, userId, status, purchaseDate } = item;
                  return client.query({
                    query: GET_USER_NAME,
                    variables: {
                      id: userId
                    }
                  }).then(item => {
                    const { visibleId, price, userId, status, purchaseDate } = item;
                    // const name = data.users.getUserById.person.name.ru,
                    //       surname = data.users.getUserById.person.surname.ru;
                    dataForTable.push({
                      NumberOfOrder: visibleId,
                      sum: price,
                      fan: `${userId}`,
                      status: status,
                      date: purchaseDate
                    })
                  }).catch(err => {
                  })
                })
                return (
                  <>
 <Table dataSource={dataForTable} pagination={{hideOnSinglePage: true, pageSize: 10}}>
    <Column title="Номер заказа" dataIndex="NumberOfOrder" key="NumberOfOrder"/>
    <Column title="Сумма" dataIndex="sum" key="sum"/>
    <Column title="Болельщик" dataIndex="fan" key="fan"/>
    <Column title="Статус" dataIndex="status" key="status"/>
    <Column title="Дата" dataIndex="date" key="date"/>
  </Table>
                  </>
                )

              }}
            </Query>
          )
        }}
      </ApolloConsumer>

но таблица выводится сразу вместе с запросом и она пуста так как массив еще пустой. так вот как мне дождаться завершения запросов и только потом вывести нужный мне компонент(promise all может быть но не смог из него вывести компонент ибо из него ничего не возвращается). заранее спасибо

Answer 1

[Петр Мухуров]

const [loading, setLoading] = useState(true);
...
Promise.all().then(() => setLoading(false));
...
return !loading ? <></> : null