Estaba planeando llamar a la segunda api usando los datos de la primera api en mi proyecto de reacción. Intenté usar un estado de uso único y encadenar las promesas usando axios, pero parece que no funciona, ya que básicamente quiero filtrar los datos de la segunda api basada en el primer valor de id de api
API 1
[{ id: 01, title: Post title One, external_id: 101 }, { id: 02, title: Post title Two, external_id: 102 }, { id: 03, title: Post title Three, external_id: 103 }]API 2
[{ id: 101, image: Image Url, }, { id: 102, image: Image Url, }, { id: 103, image: Image Url, }]Quiero que trabajen uno al lado del otro y luego pasarlos como accesorios para representar elementos basados en los datos de ambas API. Esto es lo que probé. Sé que este código no es correcto, pero me quedé atascado aquí. Aquí está mi código React
const App = () => { const [posts, setPosts] = useState([]); const [postsExternal, setPostsExternal] = useState([]); useEffect(() => axios.get(`http://localhost:2000/posts`) .then(response => { setPosts(response.data); return response.data.external_id; }) .then(getExternalId => axios.get(`http://localhost:2000/posts/${getExternalId}`)) .then(response => { setPostsExternal(response.data); }), []); return ( <div> <Posts posts={posts} postsExternal={postsExternal}/> </div> ) } export default AppHe leído su código y el problema es una pequeña disposición fuera de lugar de su código. También porque está obteniendo una matriz de datos y necesitaría hacer llamadas usando external_id para cada dato en esa matriz
Te sugiero que pruebes un enfoque diferente. Pruebe el fragmento de código a continuación (los comentarios se incluyen para que se entienda mejor):
Gracias.
import React, { useState, useEffect } from "react"; import axios from "axios"; const YourApp = () => { const [posts, setPosts] = useState([]); const [postsExternal, setPostsExternal] = useState([]); useEffect(() => { // not adding .catch() here for simplicity 😎 axios.get(`http://localhost:2000/posts`).then(({ data }) => { // we're putting this here because we only want to set state once (we don't wanna have to rerender 30times in data.map()) let externalPosts = []; // destructed out the {data}, same as response.data, so no worries 👍 setPosts(data); console.log(data); // this is where you'll make your second API calls using the external_id from first call data.map(({ external_id }) => { // {external_id} same as your-param-name.external_id axios .get(`http://localhost:2000/posts/${external_id}`) .then(({ data }) => { // we push the data into the array 📃 console.log(data); externalPosts.push(data); }); // then finally set the external post states once to prevent multiple rerendring in .map() 💯 setPostsExternal(externalPosts); // that's it 😎 }); }); // tho, i'd recommend you create a seperate function for the above 👆 }, []); return ( <div> <Posts posts={posts} postsExternal={postsExternal} /> </div> ); }; export default YourApp;Está obteniendo una matriz, no un objeto individual. Modifique useEffect para llamar a las API usando Promise.all() :
useEffect(() => { axios.get(`http://localhost:2000/posts`) .then(response => { setPosts(response.data); return response.data.map(({external_id}) => external_id); }) .then(externalIds => { return Promise.all(externalIds .map(externalId => axios.get(`http://localhost:2000/posts/${externalId}`))) }) .then(response => { setPostsExternal(response.data); }), }, []);