[英]How do I map thorough the entire array which contains other objects and arrays as well in React?
I have created a JavaScript array that contains some other objects.我创建了一个包含其他一些对象的 JavaScript 数组。 the subobjects contain arrays.
子对象包含数组。 Now I want to iterate through the entire parent object in React.
现在我想遍历 React 中的整个父对象。 I use the following approach but it does not work:
我使用以下方法但它不起作用:
Array大批
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 component用户信息组件
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>
)}
Using usersInfo
coponent in React:在 React 中使用
usersInfo
组件:
<usersInfo users = {users}/>
Everything works fine.一切正常。 But I get an issue when trying to map through the
listItems
object which contains two arrays lists
and path
.但是当我尝试通过包含两个数组
lists
和path
的listItems
对象进行映射时遇到问题。 How do I solve this?我该如何解决这个问题?
I expect the output like this:我希望输出是这样的:
you missing that,你错过了,
replace this, this is wrong .map() wont work here, as listItems
its json object, you need change this code,替换这个,这是错误的 .map() 在这里不起作用,因为
listItems
它的 json 对象,您需要更改此代码,
<ul>
{item.listItems.map((topic)=>{
<Link href={topic.path}<li>{topic.lists}</li>
})}
</ul>
replace to this, this will work替换为此,这将起作用
<ul>
{
item.listItems.lists.map((list)=>{
<li>{list}</li>
})
item.listItems.path.map((topic)=>{
<Link href={topic.path}<li>{topic.lists}</li>
})
}
</ul>
If it's guaranteed that lists
and paths
indices match and you want your <li>
elements to contain the links, you can simply do:如果保证
lists
和paths
索引匹配并且您希望<li>
元素包含链接,则可以简单地执行以下操作:
<ul>
{item.listItems.lists.map((listItem, listIndex)=>{
<li><Link href={item.listItems.path[listIndex]}>{listItem}</Link></li>
})}
</ul>
You are trying to use map method on an Object.您正在尝试在对象上使用 map 方法。 map is a Array method and not available for object.
map 是一个数组方法,不适用于对象。
Object.keys.map
must solve this. Object.keys.map
必须解决这个问题。
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>
)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.