Skip to main content
2 de 2
se añadieron 4 caracteres en el cuerpo
Rene Limon
  • 4.6k
  • 2
  • 22
  • 34

Una función async me devuelve [object Promise] en lugar del valor que espero

Estoy tratando de hacer un pequeño ejercicio.

Primero hago una petición a una API para que me regrese una lista de pokemones, hasta ahí todo bien. Lo siguiente es tomar un valor llamado url del JSON recibido y volver a hacer un llamado a la API para poder obtener el valor del nuevo JSON, se supone que funciona bien, cuando hago un console.log puedo ver el valor que necesito. Pero cuando lo intento renderizar me devuelve un [object Promise]. Entiendo que está renderizando antes de poder recibir el resultado pero no encuentro forma de resolverlo.

const Inicio = () => {
    const [pokemons, getPokemons] = useState(null);
    const url = 'https://pokeapi.co/api/v2/pokemon?limit=15&offset=100'

    const getimg = async (pkmnurl) => {
        try {
            let res = await fetch(pkmnurl)
            let data = await res.json()
            // aqui puedo ver el valor correcamente
            console.log(data.sprites.back_default)
            return data.sprites.back_default
        } catch (e) {
            console.log(e)
        }
    }

    useEffect(() => {
        fetch(url)
            .then(res => res.json())
            .then(data => getPokemons(data.results))
            .catch(e => console.log(e))
    }, [url])

    return (
        <div>
                {pokemons && pokemons.map((pokemon) => (
                    <div>
                        {pokemon.name}
                        {/*aqui esta el problema sin resolver*/}
                        <img src={getimg(pokemon.url)} />
                    </div>
                ))}
        </div>
    )
}

La función en cuestión es getimg() y la línea en donde veo el error es esta:

<img src={getimg(pokemon.url)} />
Rene Limon
  • 4.6k
  • 2
  • 22
  • 34