Estoy obteniendo una matriz de mi base de datos, estoy tratando de mapearla en carrusel, cada diapositiva debe tener 2 elementos, la siguiente diapositiva también tiene 2 elementos y así sucesivamente. Explicaré esto en los códigos. Este es el formato JSON de la matriz:
{ "data": { "allPrismicBlog": { "nodes": [ { "data": { "author": "Darius Aeres", "date": "15 Aug 2022" } }, { "data": { "author": "Ahmed Jalal", "date": "13 June 2022" } }, { "data": { "author": "Djalal Aymani", "date": "8 June 2022" } }, { "data": { "author": "Jane Cooper", "date": "3 Aug 20" } }, { "data": { "author": "Khalid Sayed", "date": "16 Aug 2022" } }, { "data": { "author": "Mohammed Yaakoubi", "date": "1 July 2022" } }, { "data": { "author": "Karim Baghta", "date": "5 May 2022" } }, { "data": { "author": "Jacob Sefrioui", "date": "15 Aug 2022" } } ] } }, "extensions": {} }y así es como estoy tratando de mapear las diapositivas:
<Carousel> {allBlogs.nodes.slice(0, Math.round(allBlogs.nodes.length/2)).map((node,index)=> ( <Slide> {allBlogs.nodes.slice(index, 2).map((blog)=> ( <BlogAuthor> <Author>{blog.data.author}</Author> <BlogDate>{blog.data.date}</BlogDate> </BlogAuthor> ) )} </Slide> )} </Carousel> Por lo tanto, en este mapeo de matriz funciona de forma intencionada, pero el error es que no obtengo todo mi blog , por ejemplo, en la primera diapositiva mostrará los 2 primeros elementos de la matriz con éxito, en la segunda diapositiva obtendrá solo un solo elemento y tendrá el índice del último elemento de la primera diapositiva (1) . ¡Necesito una manera de arreglar esto para mostrar en cada diapositiva 2 elementos de la matriz en consecuencia! Espero que hayas entendido esta pregunta.
Creo que está tratando de usar slice para dividir los nodes de la matriz en pares de dos, pero no es así como funciona slice . Le dará solo una matriz que es un subconjunto de nodes .
Mire esta respuesta para ver cómo dividir una matriz en pares de dos elementos cada uno:
const nodePairs = allBlogs.nodes.reduce( (result, value, index, array) => { if (index % 2 === 0) result.push(array.slice(index, index + 2)); return result; }, []); Use esta función en su matriz de nodes y luego itere sobre los pares:
nodePairs.map(pair => ( <Slide> {pair.map((blog) => ( <BlogAuthor> <Author>{blog.data.author}</Author> <BlogDate>{blog.data.date}</BlogDate> </BlogAuthor>) } </Slide>))