0
171
VistasCómo contar varios objetos dentro de una matriz anidada secuencialmente en reaccionar js
Tengo una estructura de matriz como esta:
const array = [ [ { "item": { "name": "item1" }, "property": { "name": "property1" } }, { "item": { "name": "item2" }, "property": { "name": "property2" } } ], [ { "item": { "name": "item3" }, "property": { "name": "property3" } } ] ]Si ejecuto este comando en Javascript puro:
let count = 0 for(let i = 0; i < array.length; i++) { for(let j = 0; j < array[i].length; j++) { count ++ console.log(count) } }Entonces la salida será así:
1,2,3 Quiero poder generar la salida como la anterior usando array.map() en ReactJS y mantener esas secciones. Este es el código que estoy usando actualmente:
return ( <div className="container"> {array.map((nestedArray, arrayIndex) => ( <div key={arrayIndex} className="array-list"> <h1>Group: {arrayIndex+1}</h1> {nestedArray.map((items, nestedArrayIndex) => ( <p>Item: {nestedArrayIndex+1}</p> ))} </div> ))} </div> )Y esta es la salida del renderizado (usando mis estilos css):
¿Cuál es una forma efectiva y corta de hacerlo?
Espero haber explicado todo claramente
3 Respuestas
Responde la pregunta0
Si desea mantener esas secciones, creo que lo más fácil sería usar una variable para realizar un seguimiento del recuento. Luego puede usar el map para iterar sobre la array y sus matrices, actualizando el recuento a medida que se encuentra cada nueva matriz.
Para hacer eso, debe separar el código en una función que llame desde el return de su componente.
const array=[[{item:{name:"item1"},property:{name:"property1"}},{item:{name:"item2"},property:{name:"property2"}}],[{item:{name:"item3"},property:{name:"property3"}}]]; function Example({ data }) { function createJSX(data) { let count = 0; return array.map((arr, i) => { return ( <div> <h3>Group: {i + 1}</h3> {arr.map(obj => { ++count; return <p>Item: {count}</p>; })} </div> ) }); } return ( <div> {createJSX()} </div> ); }; // Render it ReactDOM.render( <Example data={array} />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div> Y luego llama a la función desde tu render :
return ( <div className="container"> {createJSX()} </div> );0
Podrías hacer algo como esto.
const array = [ [ { item: { name: "item1" }, property: { name: "property1" } }, { item: { name: "item2" }, property: { name: "property2" } } ], [ { item: { name: "item3" }, property: { name: "property3" } } ] ]; <div className="container"> {array.flat().map((item, arrayIndex) => ( <p>Item: {arrayIndex + 1}</p> ))} </div>Primero deberá aplanar su matriz, luego todos los niños estarán en una matriz.
0
Otra opción si quieres hacer un seguimiento de esas secciones:
render() { let indexCount = 0; return ( <div className="container"> {array.map((nestedArray, arrayIndex) => ( <div key={arrayIndex} className="array-list"> {nestedArray.map((items, nestedArrayIndex) => ( <p key={(indexCount += 1)}>Item: {indexCount}</p> ))} </div> ))} </div> );}
Necesitará una variable para guardar el indexCount actual y luego simplemente aumentarlo cada vez que represente el índice final. Además, agregué una clave que faltaba a su representación child nestedArray.
Solo una nota al margen es que no se recomienda usar índices de matriz como claves de lista de representación.