0

Realizo peticiones a la PokeApi y puedo recuperar los datos bien a través de axios, este me devuelve un objeto con la siguiente estructura:

{
    name:"bulbasaur"
    url:"https://pokeapi.co/api/v2/pokemon/1/"
    name:"ivysaur"
    url:"https://pokeapi.co/api/v2/pokemon/2/"
    name:"venusaur"
    url:"https://pokeapi.co/api/v2/pokemon/3/"
}

Todo va bien hasta este punto, pero luego realizo una petición a la dirección que viene en la propiedad "url" y esta me devuelve un objeto con datos, entre ellos estos:

    {
  "base_experience": 101,
  "forms": [
    {
      "name": "ditto",
      "url": "https://pokeapi.co/api/v2/pokemon-form/132/"
    }
  ],
   "height": 3,
   "sprites": {
    "back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/132.png",
    "back_female": null,
    "back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/132.png",
    "back_shiny_female": null,
    "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png",
    "front_female": null,
    "front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/132.png",
    "front_shiny_female": null
    }
}

Se realiza la petición pero, cuando la quiero mostrar en una etiqueta imagen cualquiera de las fotos, me marca la propiedad sprites como undefined.

Este es el código del componente:

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

import axios from "axios";

export default function Pokemon(props) {
  const pokemonInfo = props.pokemonInfo;
  let imagenes = {};
  const [pokemon, setPokemon] = useState([]);

  const getPokemonInfo = async url => {
    const req = await axios.get(url);
    const pokeInfo = await req.data;
    console.log(`data ${JSON.stringify(pokeInfo.sprites)} END`);
    imagenes = pokeInfo.sprites;
    console.log(`imagenes ${imagenes.back_default}`);
    setPokemon(pokeInfo);
  };

  useEffect(() => {
    getPokemonInfo(pokemonInfo.url);
  }, []);

  return (
    <>
      <li>
        <h1>{pokemon.name}</h1>
        <img src={imagenes.back_default} />
        <p>weight {pokemon.weight}</p>
      </li>
    </>
  );
}

También anexo la url del proyecto PokedexConReact para una mejor comprehensión.

3
  • 1
    la propiedad sprites no existe... porque pensas que existe? sprites esta dentro de la url...
    – gbianchi
    el 2 nov. 2020 a las 2:58
  • Si hay undefined en la consola, entonces no se esta asignando ningún valor a la variable imagenes, ¿Que te muestra la consola para pokeInfo? sugiero verificar que pokeInfo contenga las llaves que solicitas (sprites, back_default etc)
    – g.4
    el 2 nov. 2020 a las 3:02
  • Es correcto no lo está asignando, cuando imprimo pokeInfo en la petición con axios se ve el objeto con sus propiedades, cuando lo imprimo fuera de, es cuando aparece undefined. el 2 nov. 2020 a las 15:35

1 respuesta 1

1

1.- Por que no conviertes tus imagenes en un estado, Ejemplo:

const[imagenes, setImagenes] = useState({});

2.- Luego puedes actualizar ese estado ejemplo:

setImagenes(pokeInfo.sprites);

3.- Ya estarías en condiciones de mostrar la imagen como la estas mostrando.

introducir la descripción de la imagen aquí

4.- Intentalo y me dices que pasó.

1
  • Efectivamente, use un estado y funcionó como muestras. el 2 nov. 2020 a las 16:40

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.