estoy haciendo una petición a una API , utilizando promesas async await , el problema sucede luego de que traigo la información de la API , ya que en consola puedo observar la información de manera correcta pero luego cuando selecciono una propiedad del objeto que contiene toda la informacion traida de la API , su valor pasa a ser undefined.
peticion
export let GetPoke = async () =>{
try{
let res = await fetch('https://pokeapi.co/api/v2/pokemon/pikachu');
let data = await res.json();
let obj = {
img : data.sprites.front_default,
habilidad: data.abilities[0]
}
return obj ;
}
catch(err){
throw ("ah ocurrido un error" + err);
}
}
Luego llamo a la funcion en mi componente:
function Home(){
let datespoke = GetPoke();
console.log(datespoke); //informacion
console.log(datespoke.img); //undefined
return (
<>
<h1>Bienvenidos</h1>
</>
);
}
el resultado de datespoke que muestra en consola es este :
Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object
habilidad: {ability: {…}, is_hidden: false, slot: 1}
img: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png"
__proto__: Object
Sin embargo datespoke.img es UNDEFINED.
Soy nuevo en react y aparentemente me estoy equivocando al traerme los objetos , espero que alguno me pueda ayudar gracias.