0
197
Vistas¿Cómo mapeo toda la matriz que contiene otros objetos y matrices también en React?
Creé una matriz de JavaScript que contiene algunos otros objetos. los subobjetos contienen matrices. Ahora quiero iterar a través de todo el objeto principal en React. Utilizo el siguiente enfoque pero no funciona:
Formación
const users =[ { id:1, username: "user1", path: "/user", listItems: {lists:["list-1", "List-2", "List-3", "List-4", "List-5"], path: ["/list-1", "/List-2", "/List-3", "/List-4", "/List-5"]} }, { id:2, username: "user2", path: "/user2", listItems: {lists:["list-1", "List-2", "List-3", "List-4", "List-5"], path: ["/list-1", "/List-2", "/List-3", "/List-4", "/List-5"]} }, { id:3, username: "user3", path: "/user3", listItems: {lists:["list-1", "List-2", "List-3", "List-4", "List-5"], path: ["/list-1", "/List-2", "/List-3", "/List-4", "/List-5"]} } ]componente UserInfo
export default function usersInfo(props){ const users = props.users; return( <div className="container"> {users.map((item)=>{ return( <section className="user"> <h1>{item.username}</h1> <p>{item.path}</p> <Link href={item.path}>Visit</Link> <p>Users lists</p> <ul> {item.listItems.map((topic)=>{ <Link href={topic.path}<li>{topic.lists}</li> })} </ul> </section> )})} </div> )} Usando usersInfo en React:
<usersInfo users = {users}/> Todo funciona bien. Pero tengo un problema cuando trato de mapear a través del objeto listItems que contiene dos lists de matrices y una path . ¿Cómo puedo solucionar esto?
Espero la salida como esta:
3 Respuestas
Responde la pregunta0
te estás perdiendo eso,
reemplace esto, esto es incorrecto .map() no funcionará aquí, ya que listItems es su objeto json, necesita cambiar este código,
<ul> {item.listItems.map((topic)=>{ <Link href={topic.path}<li>{topic.lists}</li> })} </ul>reemplazar a esto, esto funcionará
<ul> { item.listItems.lists.map((list)=>{ <li>{list}</li> }) item.listItems.path.map((topic)=>{ <Link href={topic.path}<li>{topic.lists}</li> }) } </ul>0
Está intentando usar el método de mapa en un Objeto. map es un método de matriz y no está disponible para object. Object.keys.map debe resolver esto.
export default function usersInfo(props){ const users = props.users; return( <div className="container"> {users.map((item)=>{ return( <section className="user"> <h1>{item.username}</h1> <p>{item.path}</p> <Link href={item.path}>Visit</Link> <p>Users lists</p> <ul> {Object.keys(item.listItems)[0].map((list, i)=>{ <Link href={item.listItems.path[i]}<li>{list}</li> })} </ul> </section> )})} </div> )}0
Si está garantizado que los índices de lists y paths coinciden y desea que sus elementos <li> contengan los enlaces, simplemente puede hacer lo siguiente:
<ul> {item.listItems.lists.map((listItem, listIndex)=>{ return(<li><Link href={item.listItems.path[listIndex]}>{listItem}</Link></li>); })} </ul>