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)} />
async
devuelve una Promesa, si tienes una sentenciareturn
dentro de tu funciónasync
, la Promesa será resuelta con el valor de dicha sentencia.