无法访问 Javascript 中的对象/数组

Question

I can console.log and see the array I created but as soon as I attempt to access it, I get undefined.

  async componentDidMount() {
    // fetch goal data for display
    let response = await fetchWithToken("http://localhost:8080/api/getGoals");
    let goalData = await response.json();
    goalData = await goalData.filter(skill => skill.Skill === "CS_en");
    // get info from people API with distinct list rather than every row
    let people = new Set([]);
    goalData
      .filter(element => element.UpdatedBy !== null)
      .forEach(element => {
        people.add(element.UpdatedBy);
      });
    people = Array.from(people);
    // call peopleAPI
    const peopleObj = await peopleAPI(people);

    console.log("peopleObj :", peopleObj);
    console.log("peopleObj[0] :", peopleObj[0]);
    }

Here is the peopleAPI where I'm calling another api and getting a list of user info.

const peopleAPI = people => {
  return new Promise(function(resolve, reject) {
    // get people API info
    const peopleObj = [];
    const apiPromises = [];
    if (people) {
      people.forEach(empid => {
        const apiPromise = fetch(
          `https://someApiCall/${empid}`
        )
          .then(res => res.json())
          .then(res => {
            peopleObj.push({
              empid: res.id,
              name: res.name.preferred ? res.name.preferred : res.name.full
            });
          })
          .then(() => apiPromises.push(apiPromise));
      });
      // once all promises have been resolved, return a promise with the peopleObj
      Promise.all(apiPromises).then(() => {
        resolve(peopleObj);
      });
    }
  });
};

export default peopleAPI;

Results of console.logs

Answer 1

Don't use push inside fetch.then , just return its value, and then push it to apiPromises`

const peopleAPI = people => {`
  return new Promise(function(resolve, reject) {
    // get people API info
    const apiPromises = [];
    if (people) {
      people.forEach(empid => {
        const apiPromise = fetch(`https://someApiCall/${empid}`)
          .then(res => res.json())
          .then(res => {
            return {
              empid: res.id,
              name: res.name.preferred ? res.name.preferred : res.name.full
            }
          });
        apiPromises.push(apiPromise)
      });
      Promise.all(apiPromises).then((data) => {
        resolve(data);
      });
    }
  });
};

export default peopleAPI;

Or even simpler and readable

const peopleAPI = people => {`
  const apiPromises = people.map(empid => {
    return fetch(`https://someApiCall/${empid}`)
      .then(res => res.json())
      .then(res => ({
        empid: res.id,
        name: res.name.preferred ? res.name.preferred : res.name.full
     }));
    });
  return Promise.all(apiPromises)
};