Estoy tratando de hacer que la paginación funcione, pero es un poco complejo para mí, así que necesito ayuda. Si alguien tiene idea de como hacerlo se lo agradeceria.

Necesito mostrar los elementos que posee el usuario. Una página puede tener un máximo de 12 elementos mostrados. Tengo una matriz pageData, que devuelve la cantidad de elementos para una categoría. La categoría "camisas" tiene 2 artículos.

 pageData = [ {id:'pants',totalItems: 15}, {id:'shirts',totalItems: 2}, {id:'dresses',totalItems: 13}]

En la primera carga necesito mostrar 12 artículos (digamos 12 pantalones), en la segunda carga (haga clic en el botón Cargar más) necesito mostrar 3 pantalones más, 2 camisas y 7 vestidos.

Los metadatos de un elemento deben obtenerse a través de API (este es solo un ejemplo de cómo obtener la identificación de un elemento específico, estoy tratando de ponerlo de alguna manera en el código, pero no tengo una idea clara de cómo):

 for (let i = 0; i < pageData['pants'].totalItems; i++) { const metadata = await api.getMetadata({ userId: 'userId', id: i, }); }

Este es un código que tengo, pero como dije, realmente no tengo idea de cómo hacerlo:

 const getItems = async (pageData, currentPage) => { const itemsPerPage = 12; let fetchedData = []; let total = 0; let start = currentPage * itemsPerPage; for (let i = 0; i < pageData.length; i++) { const minRange = total; const maxRange = minRange + itemsPerPage; if (start >= minRange && start <= maxRange) { const minId = minRange - total; const maxId = maxRange - total; for (let j = minId; j < maxId; j++) { const metadata = await api.getMetadata({ userId: 'userId', id: j, }); fetchedData.push(metadata); } } total += itemsPerPage; } };