Estoy haciendo una pagina con la api de poke api, el problema principal que tengo es con los array que tienen un objeto dentro, lo que hago es pasarlos a un state que sea un array vacio para poder recorrelos con un map, el problema es que esto me hace la pagina muy pesada y me tarda mucho en cargar, me podrian dar alguna sugerencia?
-
debes subir tu codigo para poder ver que haces mal, intenta no usar timeouts, reducir la cantidad de pokemones en pantalla, usar paginador, buscador, intentar no recorrer una y otra vez por cada registro. optimizar tu codigo o tenerlo pre procesado con un backend y una base de datos– Jhonnattan Riverael 2 sep. 2020 a las 21:01
-
No sé bien como editar ponerlo arriba, de todas formas ya lo subí en respuesta– Mauroel 2 sep. 2020 a las 21:16
Añade un comentario
|
1 respuesta
import React, { useEffect, useState } from "react";
import Axios from "axios";
import { handleColor } from "./helpers/type";
export const PokemonCard = ({ pokemon }) => {
const [obtenerPokemon, setObtenerPokemon] = useState([]);
const [obtenerSprite, setObtenerSprite] = useState([]);
const [obtenerTipo, setObtenerTipo] = useState([]);
const [shiny, setShiny] = useState(false);
useEffect(() => {
const fetchData = async () => {
try {
const request = await Axios.get(pokemon);
setObtenerPokemon(request.data);
setObtenerSprite(request.data.sprites);
setObtenerTipo(request.data.types);
} catch (error) {
console.log(error);
}
};
fetchData();
}, []);
console.log(obtenerPokemon.name);
return (
<>
<div className="card__pokemon container">
{shiny ? (
<img
src={obtenerSprite.front_shiny}
className="card__img"
alt={obtenerPokemon.name}
/>
) : (
<img
src={obtenerSprite.front_default}
className="card__img"
alt={obtenerPokemon.name}
/>
)}
<button
className="btn btn-primary mt-2"
onClick={() => {
setShiny(!shiny);
}}
>
Shiny
</button>
<p className="card__pokemon-name">{obtenerPokemon.name}</p>
<div className="card__types">
{obtenerTipo.map((item) => (
<p
key={item.type.name}
style={{ background: handleColor(item.type.name) }}
className="card__type-item"
>
{item.type.name}
</p>
))}
</div>
</div>
</>
);
};
-
cuanto tarda en responder la API y cuanto tarda en generarse los bloques? podria ser que la lentitud de la pagina sea culpa de la API y no de los array, es muy dificil que esa sea la razon el 3 sep. 2020 a las 0:58
-
cuando bajo el limite de 20 a 10 se generan más rápido, pero no hay problema entonces que para mostrar esos 10 cada uno aparezca en consola 6 veces como en la imagen?– Mauroel 3 sep. 2020 a las 11:40
-
ya, tu problema es el siguiente: cada vez que generas un PokemonCard, haces un const request = await Axios.get(pokemon); esto congela tu codigo, y espera hasta que el axios responda. lo que debes hacer es usar un await Promise.All([Axios.get(pokemon_1),Axios.get(pokemon_2)...]) y asi te traes todos los pokemones de una sola vez, y luego generas las cartas. asi estaras haciendo los llamados de forma paralela y luego esas respuestas enviarselas a las cards, eso deberia agilizar un monton tu sistema el 3 sep. 2020 a las 14:59