0
256
VistasCómo agregar datos recién obtenidos a una matriz existente (Js, VueJs)
Tengo algo de paginación en una ruta Api que se usó para obtener los datos de la publicación.
Cuando la paginación está en la página 2, me gustaría agregar los datos obtenidos de la página y agregarlos a la matriz existente.
Función utilizada para obtener los datos.
const posts = ref([]); const page = ref(1); const getPosts = async (page) => { await axios .get("/api/explore/gallery/?page=" + page) .then((response) => { if (page === 1) { posts.value = response.data; } else { posts.value = { ...posts.value, ...response.data }; } }); };Entonces, cuando la página es 2 en adelante, los datos obtenidos se agregarán a la matriz existente.
El resultado si usé posts.value = { ...posts.value, ...response.data };
La id comienza desde 51 en lugar de 1 - 100 .
También probé posts.value = [ ...posts.value, ...response.data ]; pero regresó
PostApi.js:12 Uncaught (in promise) TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method. at _nonIterableSpread (PostApi.js:12:39) at _toConsumableArray (PostApi.js:10:131) at eval (PostApi.js?c0c4:15:21) response.data se ven así
post.value ve así
2 Respuestas
Responde la pregunta0
Puede hacer esto con un caché para proporcionar más control sobre la cantidad de datos que se acumulan en el cliente. Esta respuesta proporciona un caché LRU de aspecto razonable. Combinándolo con tu api podría verse así...
const cache = new LRU(8); const getPosts = async (page) => { const result = cache.get(page); if (result) return Promise.resolve.result; return await axios .get("/api/explore/gallery/?page=" + page) .then((response) => { cache.set(page, response.data); return response.data; }); }; Su marcado mostraría el valor actual de las posts . Cualquier evento de usuario que active su paginación haría esto...
// in an async method this.posts = await getPosts(pageComputedFromUI);Esto tendría aproximadamente el mismo efecto que su solución (que almacena en caché todo y nunca expulsa nada), pero con el beneficio de mantener la memoria bajo su control, y a costa de más solicitudes de red.
0
He encontrado la solución,
const getPosts = async (page) => { await axios .get("/api/explore/gallery/?page=" + page) .then((response) => { if (page === 1) { posts.value = response.data; } else { posts.value = { ...posts.value, data: [...posts.value.data, ...response.data.data], }; } }); };