如何在反应中使用数组获取数据？

Question

I am trying to get all data of the applicants in an array:

Here is following code that how I fetch an array:

const [applicants, setTeamApplications] = useState([]);

  const fetchApplicationData = async () => {
    const res = await axios.get(`/api/v1/invites/team/applications/${teamId}`);

 const items = res.data.map((item) =>
  await axios.get(`/api/v1/profiles/profile/${item.applicant_publicId}`)
);

    // Set state
    setTeamApplications(res.data);
    // Toggle loading state
    setLoadingState(false);
  }; 

after I console.log(applicants)

it gave me this:

[{…}]
0:
applicant_publicId: "La1618912810062"
application_letter: "apply"
id: 3
response: "Waiting on review"

Now im trying to fetch data again with the applicant_publicId to get more data:

/api/v1/profiles/profile/${index.applicant_publicId}

How can I do that?

Answer 1

You can't await inside the .map callback as it is synchronous, but you can map the response data to an array of requests for the profiles and use Promise.all and wait for them all to resolve to an array of profiles.

const [applicants, setTeamApplications] = useState([]);

const fetchApplicationData = async () => {
  // Toggle loading state
  setLoadingState(true);

  try {
    const res = await axios.get(`/api/v1/invites/team/applications/${teamId}`);

    const profileReqs = res.data.map((item) =>
      axios.get(`/api/v1/profiles/profile/${item.applicant_publicId}`)
    );

    const items = await Promise.all(profileReqs);

    // Set state
    setTeamApplications(res.data);
    setProfiles(items);

  } catch (error) {
    // handler any error state?
  } finally {
    // Toggle loading state
    setLoadingState(false);
  }
};