React+TypeScript中如何遍历字典类型API数据并渲染内容？

你遇到的核心问题是：data.product_data.products是索引签名对象（字典），而非数组，因此无法直接调用map()方法。需要先将对象转换为可迭代的数组，再进行渲染。

正确实现方式 #

使用Object.entries()将字典转换为[键, 值]格式的数组，然后在map()中解构出键和对应的产品对象，即可正常渲染：

// 假设已获取符合ProductStats类型的data
const content = Object.entries(data.product_data.products).map(([productId, product]) => (
  <h1 key={productId}>
    {/* 可直接访问product.stats中的属性，例如product.stats.id */}
    产品ID：{productId}，产品数据：{product.stats.id}
  </h1>
));

return (
  <div>
    {content}
  </div>
);

为什么你的尝试没成功？ #

你之前的代码没有正确解构Object.entries()返回的数组：

// 错误写法：productId实际是[key, value]数组，不是单独的键
const content = Object.entries(data.product_data.products).map((productId) =>
  <h1>do some stuff here data.product_data.products[productId]</h1>
);

Object.entries()返回的每个元素是一个包含两个元素的数组：第一个是对象的键（字符串类型的productId），第二个是对应的值（包含stats的对象）。必须通过解构([productId, product])才能正确获取这两个值。

其他可选方案 #

如果不需要用到产品ID（键），可以直接用Object.values()提取所有值：

const content = Object.values(data.product_data.products).map((product, index) => (
  <h1 key={index}>
    {product.stats.id} - do some stuff here
  </h1>
));

注意：用index作为key是兜底方案，推荐优先使用productId这类唯一标识作为key，避免React渲染时出现性能问题或错误。

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