Блог

Я создал массив JavaScript, содержащий некоторые другие объекты. подобъекты содержат массивы. Теперь я хочу повторить весь родительский объект в React. Я использую следующий подход, но он не работает:

Массив

 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"]}  } ]  

Компонент usersInfo

 export default function usersInfo(props){ const users = props.users; return( lt;div className="container"gt; {users.map((item)=gt;{  return(  lt;section className="user"gt;  lt;h1gt;{item.username}lt;/h1gt;  lt;pgt;{item.path}lt;/pgt;  lt;Link href={item.path}gt;Visitlt;/Linkgt;  lt;pgt;Users listslt;/pgt;  lt;ulgt;  {item.listItems.map((topic)=gt;{  lt;Link href={topic.path}lt;ligt;{topic.lists}lt;/ligt;  })}  lt;/ulgt;  lt;/sectiongt;  )})}  lt;/divgt; )}  

Использование usersInfo сопонента в React:

 lt;usersInfo users = {users}/gt;  

Все работает нормально. Но у меня возникает проблема при попытке отобразить listItems объект, который содержит два массива lists и path . Как мне решить эту проблему?

Я ожидаю такой результат:

ты скучаешь по этому,

замените это, это неправильно .map() здесь не будет работать, так как listItems его объект json, вам нужно изменить этот код,

 lt;ulgt;  {item.listItems.map((topic)=gt;{  lt;Link href={topic.path}lt;ligt;{topic.lists}lt;/ligt;  })}  lt;/ulgt;  

замените на это, это будет работать

 lt;ulgt; {  item.listItems.lists.map((list)=gt;{  lt;ligt;{list}lt;/ligt;  })  item.listItems.path.map((topic)=gt;{  lt;Link href={topic.path}lt;ligt;{topic.lists}lt;/ligt;  }) } lt;/ulgt;  

Вы пытаетесь использовать метод карты для объекта. карта является методом массива и недоступна для объекта. Object.keys.map должен решить эту проблему.

 export default function usersInfo(props){ const users = props.users; return( lt;div className="container"gt; {users.map((item)=gt;{  return(  lt;section className="user"gt;  lt;h1gt;{item.username}lt;/h1gt;  lt;pgt;{item.path}lt;/pgt;  lt;Link href={item.path}gt;Visitlt;/Linkgt;  lt;pgt;Users listslt;/pgt;  lt;ulgt;  {Object.keys(item.listItems)[0].map((list, i)=gt;{    lt;Link href={item.listItems.path[i]}lt;ligt;{list}lt;/ligt;  })}  lt;/ulgt;  lt;/sectiongt;  )})}  lt;/divgt; )}  

Если гарантируется, что lists и paths индексы совпадают, и вы хотите, чтобы ваши lt;ligt; элементы содержали ссылки, вы можете просто сделать:

 lt;ulgt;  {item.listItems.lists.map((listItem, listIndex)=gt;{  return(lt;ligt;lt;Link href={item.listItems.path[listIndex]}gt;{listItem}lt;/Linkgt;lt;/ligt;);  })} lt;/ulgt;