Реагировать на функцию с несколькими вызовами API

Question

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

1. Asyn c Вызовы API тесно связаны друг с другом, что, безусловно, не является наилучшей практикой, поэтому как улучшить это?
2. Как я могу передать userName в fetchSubs без использования useEffect (), или я использую здесь useEffect неправильно?
3. Я думаю о том, лучше ли использовать классический класс реакции из-за проблемы со вторым пунктом, а управление государством выглядит не очень хорошо.

Заранее спасибо, и я рад обсудить этот код с вами. (Я думаю, я делаю несколько вещей неправильно)

    import React, { useState, useEffect } from 'react';
    import { API,Auth, graphqlOperation } from 'aws-amplify';
    import * as queries from '../../graphql/queries';
    import * as subscriptionsgraph from '../../graphql/subscriptions'
    import { Grid, Table } from 'semantic-ui-react';


    function listReservations() {
      const [reservations, setReservations] = useState([]);
      const [userName, setUserName] = useState([]);

      useEffect(() => {
        fetchUser();
        fetchSubs(userName);
      },[userName]);

       // get username
       const fetchUser = async () => {
          await Auth.currentAuthenticatedUser()
          .then(user => {
            setUserName(user.username);
          }).catch(err => {
            console.log('error: ', err)
          });
        }

      // get subs
      const fetchSubs = async(userName) => {
        const limit = 100;
          API.graphql(graphqlOperation(queries.searchSubtos, {
            limit,
            input: { owner: userName }
          })).then(payload => {
            const data = payload.data.searchSubtos.items;
            fetchReservations(data); // get Reservations
          }).catch(err => {
              console.log('error: ', err)
            });
      } 

      // get Reservations
      const fetchReservations = async (data) => {
        const limit = 100; 

        data.forEach(async (item) => {
          console.log(item.location);
          await API.graphql(graphqlOperation(queries.searchReservations, {
            limit,
            sort: {
              field: 'startDate',
              direction: 'asc'
            },
            filter: {
              location: {
                eq: item.location
              }
            }
          }
          )).then(payload => {
            const data = payload.data.searchReservations.items
            setReservations(data);
          }).catch(err => {
            console.log('error: ', err)
          });
        });
        }

      return (
        <div>
          <Grid centered style={{ marginTop: '15px' }}>
            <Grid.Row>
              <Grid.Column width={12}>
                <Table celled striped>
                  <Table.Header>
                    <Table.Row>
                      <Table.HeaderCell colSpan="3">City </Table.HeaderCell>
                      <Table.HeaderCell colSpan="3">Location</Table.HeaderCell>
                    </Table.Row>
                  </Table.Header>
                  <Table.Body>
                    { reservations.map((rest, i) => (
                      <Table.Row key={i}>
                        <Table.Cell colSpan="3">{rest.city}</Table.Cell>
                        <Table.Cell colSpan="3">{rest.location}</Table.Cell>
                      </Table.Row>
                    ))
                    }
                  </Table.Body>
                </Table>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </div>
      );
    }
    export default listReservations;

Answer 1

Сначала, если у вас нет массива имени пользователя, затем измените начальное значение имени пользователя следующим образом:

const [userName, setUserName] = useState(null);

Затем используйте это для получения имени пользователя при загрузке страницы:

useEffect(() => {
  fetchUser();
},[]);

Поместите еще 1 useEffect функцию, чтобы получать подпрограммы, когда выбрано действительное имя пользователя

useEffect(() => {
  if (username) fetchSubs(username);
},[username]);