0

Utilizo usseEffect y hago dos llamadas de api seguidas, se agrega correctamente al stade, pero al hacer un render map no aparece nada, la sensación es como que hace render aparece y desaparece al momento.

De pronto hay una mejor forma llamar a la api y me haga render, agradezco la ayuda.

Si hago una sola llamada al api, me funciona bien renderizando el nombre, al llamar a la primera api:

const response = await axios.get(`https://pokeapi.co/api/v2/pokemon?offset=${numero}&limit=4`);

Sí me renderiza en la propiedad name, pero como necesito más datos, utilizo el nombre para completar el otro llamado de api y me trae muchos mas datos.

Metí todo a un state y aparece bien en componentes pero al hacer map para renderizar no me aparece.

import React, { useState, useEffect } from 'react'
import axios from 'axios';

export default function Pokedex() {
    //useState
    const [pokemonData, setPokemoData] = useState<any>([]);

    useEffect(() => {

        const getPokemonDinamic = async (numero?: string) => { //llamar los primeros pokemon

            const response = await axios.get(`https://pokeapi.co/api/v2/pokemon?offset=${numero}&limit=4`);

            const data: any = await response.data;

            const arra: any = data.results.map((x: any) => x.name)

            let array: any = [];
            arra.map(async (x: any) => {
                const response: any = await axios.get(`https://pokeapi.co/api/v2/pokemon/${x}`)
                const data: any = await response.data

                let obj: any = {
                    name: data.name,
                    img: `https://play.pokemonshowdown.com/sprites/xyani/${data.name}.gif`,
                    tipos: data.types.map((type: any) => { return type.type.name }),
                    hp: data.stats[0].base_stat,
                    attack: data.stats[1].base_stat,
                    defense: data.stats[2].base_stat,
                    speed: data.stats[5].base_stat,
                    id: data.id,
                }
                array.push(obj)
            })
            setPokemoData(array)
        }
        getPokemonDinamic("0")
    }, [])

    return (
        <div>
            {
                pokemonData.length > 0 && pokemonData.map((x: any) => {
                    return (
                        <h1>{x.name}</h1>
                    )
                })
            }
        </div>
    )
}
1
  • 1
    Puedes mostrar un log de pokemonData? Commented el 12 ago. 2021 a las 15:55

1 respuesta 1

0

Estas realizando algunas cosas que son innecesarias al llamar a una API con axios. Una vez que la API te responde, no necesitas volver a especificar await en el data, ya que response trae toda la información sin necesidad de volver a realizar algún request.

Ahora, si necesitas hacer múltiples llamadas dentro de algún ciclo o similar, trabaja con Promise.all, que según la documentación, es una promesa "padre" que se resuelve o rechaza, cuando todas las demás promesas hijas (en este caso, cada llamada por pokémon) son resueltas o rechazadas también.

Por lo que, esto debería funcionar

const fullData = await Promise.all(
   names.map(async name => {
      const info = await axios.get(`https://pokeapi.co/api/v2/pokemon/${name}`)

      return {
         name: info.data.name,
         img: `https://play.pokemonshowdown.com/sprites/xyani/${info.data.name}.gif`,
         tipos: info.data.types.map((type) => type.type.name),
         hp: info.data.stats[0].base_stat,
         attack: info.data.stats[1].base_stat,
         defense: info.data.stats[2].base_stat,
         speed: info.data.stats[5].base_stat,
         id: info.data.id
      }
   }))

names sería el nombre de cada pokémon obtenidos en la primera llamada, y por cada uno vamos recolectando la información dentro de map.

Acá esta el ejemplo completo para que lo puedas revisar.

Nos comentas si es lo que necesitas.

1

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.