tengo un problema: estoy haciendo un contexto para mi estado global, en ReactJS mis funciones devuelven datos, pero cuando trato de exportarlas desde un archivo externo tengo problemas con la promesa Gracias, adjunto mi codigo:
en este fichero externo tengo la llamada a la API
const getPokemon = async() => {
const url = "https://pokeapi.co/api/v2/pokemon?limit=5";
const result = await fetch(url);
const response = await result.json();
return response.results.map((pokemon) => getData(pokemon.url));
//return response.results.forEach((pokemon) => getData(pokemon.url));
};
const getData = async(pokemon) => {
//const url = pokemon;
const result = await fetch(pokemon);
const response = await result.json();
return response;
};
export default getPokemon;
Estoy exportando esta funcion para agregarla a mi Context:
import { createContext, useEffect, useState } from "react";
import getPokemon from "../../services/getPokemon";
export const PokemonContext = createContext();
const PokemonProvider = ({children}) => {
const [pokemon, setPokemon] = useState([]);
useEffect(() => {
Promise.resolve(getPokemon()).then(resolve =>
resolve.map(re => console.log(re)))
}, []);
const value = {
pokemon,
}
return (
<PokemonContext.Provider
value={value}
>
{children}
</PokemonContext.Provider>
)
};
export default PokemonProvider
el console.log dentro de la funcion me devuelve lo que necesito, un arreglo de pokemon, pero al actualizar el estado me devuelve esto:
Promise {<pending>}
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(5)
cual puede ser mi problema? Gracias
si me pudieras explicar porfavor como hacer lo mismo pero con un for
const getPokemon = async() => {
for (let i = 1; i <= 5; i++) {
//console.log(i);
await getData(i);
}
};
const getData = async(pokemon) => {
const url = `https://pokeapi.co/api/v2/pokemon/${pokemon}`;
const result = await fetch(url);
const response = await result.json();
return response;
//console.log(response);
};