3

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);
};

1 respuesta 1

2

El problema es que creas una promesa que se resuelve devolviendo un array de promesas, que hay que resolver:

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;
};

const pokemonListPromise = getPokemon();
console.log(pokemonListPromise.toString()); //es una promesa
pokemonListPromise.then(list => console.log(list.toString())); // es una lista de promesas

Una forma de solucionarlo es convirtiendo la lista de promesas a la promesa de una lista. Entonces pasaríamos de tener una promesa de una lista de promesas...

Promesa(lista(Promesa)) //representación de la anidación

... a una promesa de una promesa de listas, pero con la ventaja de que las promesas anidadas se "aplanan" solas, quedando

Promesa(lista)

que es mucho más sencillo de tratar:

const getPokemon = async() => {
    const url = "https://pokeapi.co/api/v2/pokemon?limit=5";
    const result = await fetch(url);
    const response = await result.json();
    const listOfPromises = response.results.map((pokemon) => getData(pokemon.url));
    //convertimos una lista de promesas en una promesa de una lista
    return Promise.all(listOfPromises);
    
};
const getData = async(pokemon) => {
    //const url = pokemon;
    const result = await fetch(pokemon);
    const response = await result.json();
    return response;
};

const pokemonListPromise = getPokemon();
console.log(pokemonListPromise.toString()); //es una promesa
pokemonListPromise.then(list => {
  console.log(list.length);
  list.forEach(pokemon => console.log(pokemon.name,":", pokemon.abilities.map(entry =>entry.ability.name)));
});

2
  • muchas gracias, por tu tiempo y la explicación
    – Invited
    el 30 mar. 2021 a las 3:44
  • Está muy buna la solución pero como se haría para pasarlo a un Componente por ejemplo Pokemon.js donde tengo que mostrar la lista de pokemons
    – juank
    el 21 abr. 2022 a las 7:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.