React中如何遍历包含多层嵌套对象和数组的完整数组结构

你的代码存在4个核心错误导致内层列表渲染失败：

• 错误调用map方法：map仅支持数组类型使用，你的listItems是包含lists、path两个数组的对象，直接对其调用map会直接抛出类型错误
• 内层遍历语法错误：内层map回调没有添加return语句，且Link标签未闭合、li和Link的嵌套逻辑错误
• 未添加唯一key属性：React列表遍历要求每个子项添加唯一key，否则会抛出渲染警告，甚至出现内容错乱
• 组件名不符合规范：React自定义组件必须首字母大写，小写的usersInfo会被识别为原生HTML标签，无法正常渲染

修正后的代码 #

组件代码 #

// 注意首字母大写，Link需要提前从对应库导入（如果是Next.js则从next/link导入）
import Link from 'next/link'

export default function UsersInfo(props){
  const users = props.users;
  return(
    <div className="container">
      {users.map((item)=>{
        return(
          <section className="user" key={item.id}>
            <h1>{item.username}</h1>
            <p>{item.path}</p>
            <Link href={item.path}>Visit</Link>
            <p>Users lists</p>
            <ul>
              {/* 遍历lists数组，通过索引匹配对应的path */}
              {item.listItems.lists.map((listName, index)=>{
                return (
                  <li key={index}>
                    <Link href={item.listItems.path[index]}>{listName}</Link>
                  </li>
                )
              })}
            </ul>
          </section>  
        )
      })}
    </div>
  )
}

组件调用代码 #

<UsersInfo users={users}/>

可选优化建议 #

如果可以调整原数据结构，建议将listItems修改为对象数组形式，遍历逻辑会更清晰，避免索引匹配可能出现的错位问题：

// 调整后的listItems结构示例
listItems: [
  {name: "list-1", path: "/list-1"},
  {name: "List-2", path: "/List-2"},
  // 其余项省略
]
// 遍历方式修改为
{item.listItems.map(topic => (
  <li key={topic.path}>
    <Link href={topic.path}>{topic.name}</Link>
  </li>
))}

内容的提问来源于stack exchange，提问作者Mehdi Saqlen