如何遍历对象数组中的嵌套数组并在JSX中渲染数据？

你的JSON数据层级是：最外层nodes数组 → 每个元素包含variants对象 → variants.nodes才是存放所有产品变体的数组，这才是你需要遍历渲染的目标。之前的map只拿到了外层nodes，没深入到变体数据，所以无法渲染具体字段。

单产品场景（外层nodes只有一个元素） #

如果你的数据里外层nodes只有一个产品，直接提取变体数组后遍历即可：

// 假设原始数据存在data变量中
const variants = data.nodes[0]?.variants?.nodes || [];

// 在JSX中渲染
return (
  <div className="variant-list">
    {variants.map((variant) => (
      <div key={variant.id} className="variant-item">
        <p>ID: {variant.id}</p>
        <p>款式: {variant.title}</p>
        <p>价格: {variant.priceV2.amount} {variant.priceV2.currencyCode}</p>
      </div>
    ))}
  </div>
);

多产品场景（外层nodes有多个产品） #

如果外层nodes包含多个产品，需要嵌套map遍历：

return (
  <div className="product-list">
    {data.nodes.map((product, idx) => {
      const productVariants = product.variants?.nodes || [];
      return (
        <div key={`product-${idx}`} className="product-item">
          <h3>产品 {idx + 1}</h3>
          {productVariants.map((variant) => (
            <div key={variant.id} className="variant-item">
              <p>ID: {variant.id}</p>
              <p>款式: {variant.title}</p>
              <p>价格: {variant.priceV2.amount} {variant.priceV2.currencyCode}</p>
            </div>
          ))}
        </div>
      );
    })}
  </div>
);

关于map创建新数组的问题 #

map确实会返回新数组，但这是React渲染列表的正常机制——React需要通过新数组的变化来识别DOM更新，完全不用担心这个问题，这不是错误，是React的工作方式。

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