ReactJS：如何遍历含数组的对象以生成目标JSX元素？

问题点梳理 #

你的代码主要存在两个核心问题：

• 分类名称未正确渲染：代码里写死了<h1>Category</h1>，没有替换为实际的分类键名
• 部分标签未规范闭合：比如<img>标签在JSX中推荐使用自闭合写法，避免语法报错

另外，用map代替for循环更符合React函数式编程风格，代码更简洁易维护。

修正后的完整代码 #

const compileCategoryOfProducts = (tempCategoryObj) => {
  // 遍历分类对象的键值对，生成分类容器
  return Object.entries(tempCategoryObj).map(([categoryName, products]) => (
    <div key={categoryName}>
      <h1>{categoryName}</h1>
      {/* 遍历当前分类下的产品，生成产品卡片 */}
      {products.map(product => (
        <div key={product.id} className="productContainer">
          <img src={product.image} alt={product.title} />
          <p>{product.title}</p>
          <p>Description: {product.description}</p>
          <p>Quantity: {product.qty}</p>
        </div>
      ))}
    </div>
  ));
};

代码说明 #

1. 分类容器生成：通过Object.entries将分类对象转为键值对数组，用map遍历生成每个分类的外层div，将分类名作为唯一key，同时渲染分类名称
2. 产品卡片生成：对每个分类下的产品数组用map遍历，生成独立的产品容器，用product.id作为唯一key（若产品无id，可使用product.title + categoryName组合确保唯一性）
3. 标签规范：<img>添加了alt属性（符合无障碍访问要求）并改为自闭合写法，所有标签均正确闭合
4. 结构简化：合并原有的两个函数，逻辑更连贯，减少不必要的中间变量

使用示例 #

假设你的数据源为：

const productData = {
  Computer: [{ id: 1, title: "Aftershock", image: "/aftershock.jpg", description: "高端游戏本", qty: 5 }],
  Car: [
    { id: 2, title: "BMW", image: "/bmw.jpg", description: "豪华轿车", qty: 3 },
    { id: 3, title: "Bentley", image: "/bentley.jpg", description: "超豪华车型", qty: 1 }
  ]
};

在组件中直接调用即可：

return <div>{compileCategoryOfProducts(productData)}</div>;

这样就能生成符合需求的JSX结构：每个分类对应一个容器并显示分类名，每个产品对应独立容器展示详情。

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