Creé un sitio web de pokedex, solo para perder el tiempo e intento mostrar 12 pokemon en una página hasta que el usuario haga clic en la página siguiente, luego se mostrarán los siguientes 12 en base a pokeapi: "https://pokeapi.co/api /v2/pokemon?offset=0&limit=12"
function getAllPokemon(url) { fetch(url) .then((res) => res.json()) .then((data) => { let allPromise = Promise.all( data.results.map((e) => { return new Promise((resolve, reject) => { resolve(e); }); }) ); allPromise.then((e) => { e.map((res) => { fetch(res.url) .then((e) => e.json()) .then((e) => { setListPokemon((listPokemon) => [ ...listPokemon, { id: e.id, name: res.name, url: res.url, image_url: e.sprites.other["official-artwork"].front_default, }, ]); }); }); }); }); setLoading(false); }Luego usaría el mapa para representar todos los datos en la pantalla.
{listPokemon.map((p) => ( <Grid> <Card> <CardMedia component="img" image={p.image_url} alt={p.name} /> <CardContent> {p.id}.{setCap(p.name)} </CardContent> </Card> </Grid> ))}El problema que tengo es que a veces el mapa representaría el elemento en orden aleatorio, la mayoría de las veces aún estaría en orden ascendente.
Por lo que noto es que cuando trato de ejecutar la aplicación en mi teléfono (que es más lento que mi PC), esto sucede con más frecuencia.
¿Esto sucede debido a lag?
¿Hay alguna manera de asegurarme de representar el elemento en el orden en que se agrega?
Tenga en cuenta que está realizando solicitudes asincrónicas dentro de un bucle for . Debe hacer una serie de promesas y usar Promise.all() en tal caso. El resultado estará en un orden específico, como se explica aquí , por lo que podrá actualizar su estado solo una vez con una recopilación ordenada de datos y luego generar su lista.