Estoy haciendo un proyecto React.js . Estoy tratando de extraer datos de una API que tiene múltiples puntos finales. Tengo problemas para crear una función que extraiga todos los datos a la vez sin tener que hacer cada punto final por separado. El console.log da una matriz vacía y no se muestra nada. Las 'películas' de accesorios son datos del padre y funcionan bien. También es de otro punto de la misma API. Este es el código:
import { useEffect, useState } from "react"; import styles from './MovieDetail.module.css'; const MovieDetail = ({films}) => { const [results, setResults] = useState([]); const fetchApis = async () => { const peopleApiCall = await fetch('https://www.swapi.tech/api/people/'); const planetsApiCall = await fetch('https://www.swapi.tech/api/planets/'); const starshipsApiCall = await fetch('https://www.swapi.tech/api/starships/'); const vehicleApiCall = await fetch('https://www.swapi.tech/api/vehicles/'); const speciesApiCall = await fetch('https://www.swapi.tech/api/species/'); const json = await [peopleApiCall, planetsApiCall, starshipsApiCall, vehicleApiCall, speciesApiCall].json(); setResults(json.results) } useEffect(() => { fetchApis(); }, []) console.log('results of fetchApis', results) return ( <div className={styles.card}> <div className={styles.container}> <h1>{films.properties.title}</h1> <h2>{results.people.name}</h2> <p>{results.planets.name}</p> </div> </div> ); } export default MovieDetail;Acabo de agregar la publicación de Phil al código y lo subí a un codesanbox
Desea obtener y luego recuperar el flujo JSON de cada solicitud.
Algo como esto
const urls = { people: "https://www.swapi.tech/api/people/", planets: "https://www.swapi.tech/api/planets/", starships: "https://www.swapi.tech/api/starships/", vehicles: "https://www.swapi.tech/api/vehicles/", species: "https://www.swapi.tech/api/species/" } // ... const [results, setResults] = useState({}); const fetchApis = async () => { try { const responses = await Promise.all(Object.entries(urls).map(async ([ key, url ]) => { const res = await fetch(url) return [ key, (await res.json()).results ] })) return Object.fromEntries(responses) } catch (err) { console.error(err) } } useEffect(() => { fetchApis().then(setResults) }, [])Cada URL se resolverá en una matriz como...
[ "people", [{ uid: ... }] ] Una vez que todos estos se resuelvan, se convertirán en un objeto (a través Object.fromEntries() ) como
{ people: [{uid: ... }], planets: [ ... ], // ... }Tenga en cuenta que cada propiedad es una matriz, por lo que necesitaría algo como
<h2>{results.people[0].name}</h2>o un bucle.