如何对包含其他对象和数组的整个数组进行映射？

Question

我已经创建了一个包含其他对象的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(
<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>
)}

在反应中使用usersInfo常量：

<usersInfo users = {users}/>

一切都很好。但是，在试图通过包含两个数组的listItems对象( lists和path )进行映射时，我遇到了一个问题。我该怎么解决这个问题？

我期望这样的输出：

​

​

Answer 1

你错过了，

替换这个，这是错误的，.map()不能在这里工作，因为listItems是它的json对象，您需要修改这段代码，

    <ul>
    {item.listItems.map((topic)=>{
        <Link href={topic.path}<li>{topic.lists}</li>
    })}
    </ul>

取代这个，这会起作用的

<ul>
{
  item.listItems.lists.map((list)=>{
    <li>{list}</li>
  })
  item.listItems.path.map((topic)=>{
    <Link href={topic.path}<li>{topic.lists}</li>
  })
}
</ul>

Answer 2

如果保证lists和paths索引匹配，并且希望<li>元素包含链接，则只需执行以下操作：

<ul>
    {item.listItems.lists.map((listItem, listIndex)=>{
       return(<li><Link href={item.listItems.path[listIndex]}>{listItem}</Link></li>);
    })}
</ul>

Answer 3

您正在尝试在对象上使用map方法。map是Array方法，对象不可用。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>
)}