1

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.

2
  • lo que debe estar pasando es que la funcion es llamada antes de recibir la peticion, deberias llamar a la funcion dentro del cuerpo del try, para saberlo coloca un consolo.log que alguna frase en el try y otro luego de la llamada a la funcion y ve cual se imprime primero Commented el 13 abr. 2021 a las 3:14
  • Gracias por tomarte el tiempo para responder, pero aparentemente ese no es el error e intentado diversas formas para renderizar la propiedad, realicé un setTimeout con una demora de 4000ms y sigue dando undefined, realicé un condicional: {datespoke.img !== undefined && (<p>{datespoke.img}</p>)} y nunca se renderizó la propiedad ya que aparentemente su valor no se por que motivo es undefined , creo que me estoy equivocando al llamar la propiedad.
    – xen todex
    Commented el 13 abr. 2021 a las 3:35

1 respuesta 1

0

No hay error en tu código, es solo que necesitas trabajar la respuesta de la Promesa con una funcion de continuación then:

let datespoke = GetPoke();
     console.log(datespoke); //informacion 
     console.log("img",datespoke.img); //undefined
     datespoke.then(response => {
       //aqui ya vez la estructura obj, dentro del scope de Home
       console.log("response",response);
 })

En esta pregunta, se explica un poco el uso de Promesas y la sintáxis async/await en el contexto ReactJS.

Recordemos que las funciones async/await regresan Promesas.

Por ùltimo, en functional programming para ReactJS, el patrón mas común para realizar solicitudes de datos a API's es usando el hook useEffect:

  useEffect(()=>{
     let datespoke = GetPoke();
     console.log(datespoke); //informacion 
     console.log("img",datespoke.img); //undefined
     datespoke.then(response => {
       console.log("response",response);
     })
    },[])

Espero que esta respuesta sea de ayuda.

useEffect Doc oficial

4
  • Gracias, se utiliza ese patrón porque aprovechamos que el componente se renderiza y hacemos la petición? podrias explicarme mejor porque se utiliza ese patrón (useefect)
    – xen todex
    Commented el 13 abr. 2021 a las 3:50
  • Asi como tienes tu código, la app va a funcionar, pero observa que tienes repetidos los console.log 2 veces, esto significa que ReactJS esta haciendo doble regreso. Ahora cuando envuelves en useEffect, observa que Reactjs solo devuelve una vez la petición. Esto pasa porque useEffect esta configurado para correr una vez, cuando el componente se haya montado totalmente; sugiero dar una revisada al concepto de component lifecycle, o lanzar otra pregunta para la comunidad relacionada al tema, será muy interesante ver lo que los colegas pueden aportar ya que es un tema muy solicitado.
    – g.4
    Commented el 13 abr. 2021 a las 3:58
  • Aquí otra respuesta relacionada al tema de useEffect, si consideras que fue de utilidad no olvides votar, saludos!
    – g.4
    Commented el 13 abr. 2021 a las 4:02
  • muchas gracias fíjate que ya voté tu respuesta, cualquier cosa avísame.
    – xen todex
    Commented el 13 abr. 2021 a las 4:04

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.