2

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)} />
3
  • 1
    nunca estas esperando la resolucion de la promesa antes de mostrar tu imagen.. te das cuenta de eso?
    – gbianchi
    Commented el 4 ago. 2021 a las 4:18
  • @gbianchi si veo que ese es el error, pero todavia no logro ver cómo solucionanrlo,
    – Rene Limon
    Commented el 4 ago. 2021 a las 4:37
  • Como comentario adicional, toda llamada a una función tipo async devuelve una Promesa, si tienes una sentencia return dentro de tu función async, la Promesa será resuelta con el valor de dicha sentencia. Commented el 4 ago. 2021 a las 7:41

1 respuesta 1

0

Como estás poniendo la promesa dentro del jsx no funciona. Así que lo que hice fue justo cuando obtengo los datos, obtener la imagen, luego concatenar los objetos de respuesta y ya al final modificar el estado del componente.

import React, { useState, useEffect } from "react";

const Inicio = () => {
  const [pokemons, setPokemons] = useState([]);
  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();
      return data.sprites.back_default;
    } catch (e) {
      console.log(e);
    }
  };
  
  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then(async (data) => {
        for (var i = 0; i < data.results.length; i++) {
          const img = await getimg(data.results[i].url);
          Object.assign(data.results[i], {
            url: img,
          });
        }
        setPokemons(data.results);
      })
      .catch((e) => console.log(e));
  }, []);

  return (
    <div>
      {pokemons.map((pokemon) => {
        return (
          <div key={pokemon.name}>
            {pokemon.name}
            <img src={pokemon.url} alt={pokemon.name} />
          </div>
        );
      })}
    </div>
  );
};

export default Inicio;
2
  • es cierto, ya también había pensado en hacer la petición justo cuando recibo el primer json. Una ultima duda, de la forma en que yo lo intentaba hacer definitivamente no es correcto verdad? el único camino es como lo implementaste?
    – Rene Limon
    Commented el 4 ago. 2021 a las 4:52
  • Por lo que sé, el renderizado no puede ser asincrónico. Commented el 4 ago. 2021 a las 16:05

Tu Respuesta

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

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