React中如何渲染嵌套对象列表？附示例代码

嘿，我懂你为啥用map没成功啦——你数据里的products是对象，而map是数组专属的方法，直接在对象上用肯定会报错哒！咱们只需要把对象转成数组，就能顺利用map渲染了。

核心思路 #

把每个分类下的products对象，用Object.entries()转换成键值对数组（格式是[[key1, value1], [key2, value2]]），这样就能用map遍历每个产品了。

完整代码示例 #

import React from 'react';

const ProductList = () => {
  const products2 = [
    {category: "Category 1", products: { product1: "1", product2: "2" } },
    {category: "Category 2", products: { product1: "3", product2: "4" } },
  ];

  return (
    <div className="product-container">
      {/* 先遍历每个分类 */}
      {products2.map((category, catIndex) => (
        <div key={catIndex} className="category-section">
          <h2>{category.category}</h2>
          {/* 把products对象转成数组后遍历产品 */}
          <div className="product-list">
            {Object.entries(category.products).map(([productName, productId]) => (
              <div key={productName} className="product-item">
                <strong>{productName}</strong>: ID {productId}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

export default ProductList;

关键细节说明 #

• 外层map：遍历products2数组里的每个分类项，给每个分类加key（这里用catIndex临时替代，要是你的分类有唯一ID，优先用ID哦）
• Object.entries()：把products对象拆成[产品名, 产品值]的数组，这样就能用map遍历每个产品了
• 内层map：遍历转换后的产品数组，用productName作为key（因为每个产品名是唯一的，比index更靠谱）

可选优化 #

如果你只需要产品的值，不需要键，可以用Object.values(category.products)；如果只需要键，就用Object.keys(category.products)，根据你的需求调整就行~

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