Tengo un pequeño problema que parece que no puedo solucionar. Estoy obteniendo datos de Pokeapi para recuperar algunos pokemon, luego iterando a través de esos datos para activar otra solicitud de recuperación para recuperar los datos asociados con un pokemon dado.
Quiero enviar estos datos a una matriz para poder activar esta solicitud a medida que se carga la aplicación y guardar los datos en el almacenamiento para que no se tengan que realizar nuevas solicitudes. Sin embargo... (cosa que aún no he hecho por cierto)
Console.log los resultados y los datos están allí, pero cuando trato de mapear los datos, nada.
Por favor, vea mi intento a continuación:
export function SomeComponent() { let arr = []; async function fetchPokemon() { const pokemon = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10') .then(response => response.json()) for await (const x of pokemon.results.map(async (result) => await fetch(result.url) .then(response => response.json()))) { arr.push(x); } } fetchPokemon(); console.log(arr) return ( <> {arr.map((pokemon) => ( <p> {pokemon.name} </p> ))} </> ) }Mi mejor suposición es que la consola muestra resultados en vivo y que los datos aún no están completos.
Me gustaría ver los nombres de pokemon mostrados en el
etiqueta.
En reaccionar, deberíamos usar state para almacenar datos y useEffect para realizar acciones de efectos secundarios como obtener datos:
export function SomeComponent() { const [arr, setArray] = useState([]); async function fetchPokemon() { const pokemon = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10') .then(response => response.json()) for await (const x of pokemon.results.map(async (result) => await fetch(result.url) .then(response => response.json()))) { setArray([...arr, x]); } } useEffect(() => {fetchPokemon()}, []} return ( <> {arr.map((pokemon) => ( <p> {pokemon.name} </p> ))} </> ) }