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>
)
}