React中如何遍历多维数组？映射多维数组时内容不显示问题排查

你的问题核心在于数据结构和组件预期的props不匹配，导致React无法正确读取到需要渲染的内容，所以页面只显示空的category div。

问题根源 #

你定义的Categories数组里，每个元素是一个仅包含单个键值对的对象（比如{Gadgets: [...]}），但你的Category组件却试图直接访问category.category、category.image这些属性——这些属性在当前的数组元素里根本不存在！所以所有插值的地方都是undefined，React会自动忽略这些无效内容，最终只渲染出空的div容器。

解决方案 #

这里提供两种可行的修复方式，你可以根据是否能修改原数组结构来选择：

方案1：调整数组结构（推荐，更直观易维护）

把Categories改成每个元素包含分类名称和子分类数组的结构，让它和组件的预期对齐：

const Categories = [
  {
    category: 'Gadgets',
    subCategories: [
      { 'name': 'iphone', 'image': '/assets/images/iphone.png' },
      { 'name': 'samsung', 'image': '/assets/images/samsung.jpg' }
    ]
  },
  {
    category: 'Books',
    subCategories: [
      { 'name': 'Fiction', 'image': '/assets/images/book-1.jpg' },
      { 'name': 'education', 'image': '/assets/images/book-2.jpg' }
    ]
  }
]

然后修改Category组件，让它遍历子分类数组：

function Category({ category }) {
  return (
    <div className="category">
      <h3>{category.category}</h3>
      {/* 遍历子分类，记得加key属性避免React警告 */}
      {category.subCategories.map((subCat, idx) => (
        <a key={idx} href={`/categorypage`} className='sub-category'>
          <img src={subCat.image} alt={subCat.name} />
          <p className='name'>{subCat.name}</p>
        </a>
      ))}
    </div>
  )
}

App.js里的映射代码可以保持不变，现在每个数组元素的结构完全符合组件的需求了。

方案2：保持原数组结构，修改组件与映射逻辑

如果不能修改原数组结构，我们可以在映射时先提取出分类名称和子分类数组，再传递给组件：

首先修改App.js里的映射代码：

{Categories.map((categoryObj, i) => {
  // 提取每个对象的键（分类名）和对应的值（子分类数组）
  const [categoryName, subCategories] = Object.entries(categoryObj)[0];
  return <Category key={i} categoryName={categoryName} subCategories={subCategories} />;
})}

然后更新Category组件，接收新的props：

function Category({ categoryName, subCategories }) {
  return (
    <div className="category">
      <h3>{categoryName}</h3>
      {subCategories.map((subCat, idx) => (
        <a key={idx} href={`/categorypage`} className='sub-category'>
          <img src={subCat.image} alt={subCat.name} />
          <p className='name'>{subCat.name}</p>
        </a>
      ))}
    </div>
  )
}

额外注意 #

两种方案里都给列表项加上了key属性，这是React列表渲染的最佳实践，能避免不必要的重渲染和控制台警告。

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