使用map渲染两层深度嵌套对象时分类及子分类展示异常如何解决

问题根因 #

你当前的代码将子分类的渲染逻辑嵌套在了分类的遍历循环中，因此每渲染一个父分类就会重复生成一次Subcategories标题，也无法实现分类、子分类分别放在两个独立div的需求。

解决方案 #

你只需要拆分两次遍历逻辑即可：第一次遍历所有父分类渲染分类列表，第二次先把所有子分类的内容提取到统一数组，再渲染子分类列表，代码修改如下：

const categories = [
  {
    catName: "Education",
    subCategory: [
      {
        subCatName: "College"
      },
      {
        subCatName: "Student"
      }
    ]
  },
  {
    catName: "Motivation",
    subCategory: [
      {
        subCatName: "Study"
      }
    ]
  }
];

export default function App() {
  // 提取所有子分类为统一数组
  const allSubCategories = categories.flatMap(item => item.subCategory)
  return (
    <div className="App">
      <h1>All Categories</h1>
      <div className="container">
        {/* 分类独立渲染区域 */}
        <div className="categoriesContainer">
          <h2>Categories</h2>
          {categories.map((item, index) => (
            <span key={index}>{item.catName}</span>
          ))}
        </div>
        {/* 子分类独立渲染区域 */}
        <div className="subcategoriesContainer">
          <h4>Subcategories</h4>
          {allSubCategories.map((el, idx) => (
            <span key={idx}>{el.subCatName}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

如果你的需求是保留父分类和对应子分类的关联展示，仅需要避免Subcategories标题重复，把Subcategories标题移出第一层map循环即可。

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