Getting a undefined value when trying to match fetch results to people objects-CodePudding

Im working on a star wars api app. I am getting an array of people objects, 10 characters. Who all are their own object with different values. However homeworld, and species are urls. So I have to fetch them and store that data to the correct place. I figured out a way to get the homeworld values to each character. However when I try to do it with species I receive undefined. Would appreciate any help this has been kind of a pain thanks ahead of time !

  const [people, setPeople] = useState([]);
  const [homeWorld, setHomeWorld] = useState([]);
  const [species, setSpecies] = useState([]);
  const [nextPageUrl, setNextPageUrl] = useState("https://swapi.dev/api/people/");
  const [backPageUrl, setBackPageUrl] = useState('');
  const [test, setTest] = useState([]);
 

  const fetchPeople = async () => {
    const { data } = await axios.get(nextPageUrl);
    setNextPageUrl(data.next);
    setBackPageUrl(data.previous);
    return data.results;
  }

  const backPage = async () => {
      const { data } = await axios.get(backPageUrl);
      setCharacters(data.results);
      setNextPageUrl(data.next);
      setBackPageUrl(data.previous);
  }


  // Get People
  async function getPeople() {
    const persons = await fetchPeople();

    const homeWorldUrl= await Promise.all(
      persons.map((thing) => axios.get(thing.homeworld)),
    );

   const newPersons =  persons.map((person) => {
    return {
      ...person,
      homeworld: homeWorldUrl.find((url) => url.config.url === person.homeworld)
    };
   });

   const newPersons2 = newPersons.map((person) => {
    return {
      ...person,
      homeWorld: person.homeworld.data.name
    };
   });
   setPeople(newPersons2);
  }

  // Get Species
  async function getSpecies() {
    const persons = await fetchPeople();

    const speciesUrl = await Promise.all(
      persons.map((thing) => axios.get(thing.species)),
    );

   
   const newSwapi =  persons.map((person) => {
    return {
      ...person,
      species: speciesUrl.find((info) => info.data.url === person.species)
    };
   });
setTest(newSwapi);
  //  const newPersons2 = newPersons.map((person) => {
  //   return {
  //     ...person,
  //     homeWorld: person.homeworld.data.name
  //   };
  //  });
  }

  useEffect(() => {
     getPeople();
     getSpecies();
  
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); ```

CodePudding user response：

Species property of person is a array, so your getSpecies() should be like

async function getSpecies() {
    const persons = await fetchPeople();
    const speciesUrl = await Promise.all(
      persons
        .filter((thing) => thing.species.length)
        .map((thing) => axios.get(thing.species[0]))
    );
    const newSwapi = persons.map((person) => {
      return {
        ...person,
        species: speciesUrl.find((info) => info.data.url === person.species[0])
      };
    });
    setTest(newSwapi);
}