Sé que el título es bastante confuso, no estaba seguro de cómo expresarlo mejor. Lo que estoy tratando de hacer es buscar algunos elementos, mapearlos para mostrarlos, pero el problema es que uno de esos elementos tiene un valor de lo que debe ser otra llamada API para acceder a él.
Esto es lo que estoy tratando de hacer:
En primer lugar, estoy almacenando un estado vacío, que luego se convierte en los datos de los elementos obtenidos:
const [data, setData] = useState([]);
Estoy usando axios para buscar y almacenar los datos:
const fetchItems = () => { axios("https://swapi.dev/api/people") .then((response) => { console.log(response.data.results); const newData = response.data.results.map((item) => ({ name: item.name, homeworld: () => { axios.get(item.homeworld).then((response) => { response.data.results; }); }, })); setData(newData); }) .catch((error) => { console.log("error", error); }); };Funciona con el nombre porque es un valor simple. Sin embargo, el mundo natal incluye un enlace que debe llamarse una vez más para poder acceder a él, en lugar de ser un valor simple como el nombre en este caso. ¿Cómo puedo llamarlo y acceder a los valores que se encuentran dentro de ese enlace y mostrarlos en lugar de solo mostrar la URL?
Espero que esto pueda ayudarte:
const [data,setData] = useState([]) const fetchItems = () => { axios("https://swapi.dev/api/people") .then(response => { console.log(response.data.results); const { results } = response.data; for (const item of results) { axios.get(item.homeworld).then(({data}) => { setData([...data,{ name: item.name, homeworld: data.results }]); }); } }) .catch(error => { console.log("error", error); }); }; o con fetch :
const [data,setData] = useState([]) fetch("https://swapi.dev/api/people").then(re=>re.json()) .then(response => { const newData = [] const { results } = response; const newData = []; for (const item of results) { fetch(item.homeworld).then(re => re.json()).then((data) => { newData.push({ name: item.name, homeworld: data }); }); } console.log(newData) setData(newData) }) .catch(error => { console.log("error", error); });Usar Promise.all()
Puede usar el método Promise.all() para obtener toda la información que necesita creando una matriz de promesas asignando la matriz response.results con una función asíncrona .
Este es el ejemplo de código
const fetchItems = async () => { const req = await axios.get("https://swapi.dev/api/people"); const response = await req.data; const allDataPromises = response.results.map(async (item) => { const itemReq = await axios.get(item.homeworld); const itemResponse = await itemReq.data; return { name: item.name, homeworld: itemResponse, }; }); const allData = await Promise.all(allDataPromises); };