Skip to main content
se eliminaron 42 caracteres en el cuerpo; título editado
Origen Enlace
Israel-ICM
  • 3.6k
  • 25
  • 20
  • 26

no No me aparece nada al hacer render un map al state,

utilizo usseEffectUtilizo 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.

siSi hago una sola llamada al api, me funciona bien rederizandorenderizando el nombre, al llamar a la primera api "const response = await axios.get(https://pokeapi.co/api/v2/pokemon?offset=${numero}&limit=4);" si:

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

me renderiza elen 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.

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

no me aparece nada al hacer render un map al state,

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.

si hago una sola llamada al api, me funciona bien rederizando el nombre, al llamar a la primera api "const response = await axios.get(https://pokeapi.co/api/v2/pokemon?offset=${numero}&limit=4);" si me renderiza el 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.

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

No me aparece nada al hacer render un map al state,

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.

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`);

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

no me aparece nada al hacer render un map al state,

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 rederizando el nombre, al llamar a la primera api "const response = await axios.get(https://pokeapi.co/api/v2/pokemon?offset=${numero}&limit=4);" si me renderiza el 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.

Meti 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>

   )
}