如何在React.js中使用map按指定格式打印座位（State）值？

你当前的代码会重复渲染所有座位，原因是每个<tr>里都完整遍历了一遍reservedSeat数组，导致每行都输出全部座位。要实现按A/B/C分组、每行显示对应前缀座位的效果，需要先对座位数据按前缀分组，再分别渲染每组内容。

步骤1：对座位数据按前缀分组 #

在组件中添加数据分组逻辑，用reduce方法把相同前缀的座位归为一组：

// 按座位号前缀（A/B/C）分组
const groupedSeats = reservedSeat.reduce((acc, seat) => {
  // 提取座位号的第一个字符作为分组前缀
  const prefix = seat.seatno.charAt(0);
  if (!acc[prefix]) {
    acc[prefix] = [];
  }
  acc[prefix].push(seat);
  return acc;
}, {});

// 将分组对象转换为数组，方便后续遍历
const seatGroups = Object.entries(groupedSeats);

步骤2：修改渲染代码 #

用分组后的数组替代原有的双重循环，每个分组对应一行：

<tbody>
  {seatGroups.map(([prefix, seats]) => (
    <tr key={prefix}>
      <td>{prefix}</td>
      {seats.map(seat => (
        <td key={seat.id}>
          <Button>{seat.seatno}</Button>
        </td>
      ))}
    </tr>
  ))}
</tbody>

逻辑说明 #

• reduce方法遍历reservedSeat数组，把每个座位按前缀归类到对应的数组中，最终得到以A/B/C为键的分组对象。
• Object.entries将分组对象转换为[前缀, 座位数组]的格式，方便在map中同时获取前缀和对应座位列表。
• 外层map遍历每个分组生成一行，内层map只渲染当前分组下的座位，避免重复输出。

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