React中如何用.map或替代方法处理嵌套数组并渲染表格

我正在处理一个如下结构的数组：

const orders = [
  {
    productId: "product1",
    orderedBy: [{customerId: "customer1"}, {customerId: "customer2"}, /* ... */ {customerId: "customerN"}]
  },
  {
    productId: "product2",
    orderedBy: [{customerId: "customer3"}, {customerId: "customer4"}, /* ... */ {customerId: "customerN"}]
  },
  // ...
  {
    productId: "productN",
    orderedBy: [{customerId: "customer5"}, {customerId: "customer6"}, /* ... */ {customerId: "customerN"}]
  }
]

我想要把它渲染成每行对应一个产品-客户对的表格（每行显示产品ID和对应的下单客户ID）。

我尝试了以下代码，但出现错误：

{orders.map((order, index) => (
  {order.orderedBy.map((customer, index) => (
    <tr>
      <td>order.productId</td>
      <td>customer.customerId</td>
    </tr>
  ))}
))}

我知道可以先创建一个扁平化的新数组再渲染，但想了解有没有更简洁的实现方式。

简洁修复方案 #

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

1. 外层map的回调多了一层大括号，JSX中箭头函数直接返回JSX时无需额外加{}，否则会被解析为对象导致语法错误。
2. 直接写order.productId这类字符串，没有用JSX表达式包裹，会直接显示文本而非变量值。

修复后的嵌套map写法 #

<table>
  <thead>
    <tr>
      <th>产品ID</th>
      <th>客户ID</th>
    </tr>
  </thead>
  <tbody>
    {orders.map((order, orderIndex) => 
      order.orderedBy.map((customer, custIndex) => (
        <tr key={`${order.productId}-${custIndex}`}>
          <td>{order.productId}</td>
          <td>{customer.customerId}</td>
        </tr>
      ))
    )}
  </tbody>
</table>

更紧凑的flatMap写法 #

用flatMap先映射再扁平化数组，省去嵌套层级，代码更简洁：

<table>
  <thead>
    <tr>
      <th>产品ID</th>
      <th>客户ID</th>
    </tr>
  </thead>
  <tbody>
    {orders.flatMap(order => 
      order.orderedBy.map(customer => (
        <tr key={`${order.productId}-${customer.customerId}`}>
          <td>{order.productId}</td>
          <td>{customer.customerId}</td>
        </tr>
      ))
    )}
  </tbody>
</table>

关键说明 #

• 给每个<tr>添加唯一key属性，符合React列表渲染的性能要求。
• 用{}包裹变量，确保渲染的是变量实际值而非字符串文本。

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