React求助：服务端取数后动态渲染双列表格

我希望在React中将服务端获取的数据渲染成双列表格，期望的布局如下：

+----------+----------+----------+----------+
| Row 1               | Row 7               |
+----------+----------+----------+----------+
| Row 2               | Row 8               |
+----------+----------+----------+----------+
| Row 3               | Row 9               |
+----------+----------+----------+----------+
| Row 4               | Row 10              |
+----------+----------+----------+----------+
| Row 5               | Row 11              |
+----------+----------+----------+----------+
| Row 6               | Row 12              |
+----------+----------+----------+----------+

但目前我的代码渲染出的是单列表格：

+----------+----------+----------+----------+
| Row 1                                     |
+----------+----------+----------+----------+
| Row 2                                     |
+----------+----------+----------+----------+
| Row 3                                     |
+----------+----------+----------+----------+
| Row 4                                     |
+----------+----------+----------+----------+
| Row 5                                     |
+----------+----------+----------+----------+
| Row 6                                     |
+----------+----------+----------+----------+
| Row 7                                     |
+----------+----------+----------+----------+
| Row 8                                     |
+----------+----------+----------+----------+
| Row 9                                     |
+----------+----------+----------+----------+
| Row 10                                    |
+----------+----------+----------+----------+
| Row 11                                    |
+----------+----------+----------+----------+
| Row 12                                    |
+----------+----------+----------+----------+

数据量最多可能有20行，我的当前代码如下：

const data = [
  {Location:"NY", Seal: "loose"},
  {Location:"MD", Seal: "intact"},
  {Location:"DC", Seal: "good"},
  {Location:"KT", Seal: "bad"},
  {Location:"VI", Seal: "patty"},
  {Location:"WI", Seal: "broken"},
  {Location:"DT", Seal: "daily"},
  {Location:"PE", Seal: "weekly"}
]

<table>
  <tr>
    {data?.map(
      (item, index) => (
        <div key={index}>
          <td>
            <p>
              ID <b>{index + 1}</b>:
              Location # <b>{item["Location"]}</b>
              Seal # <b>{item["Seal"]}</b>
            </p>
          </td>
        </div>
      )
    )}
  </tr>
</table>

当前代码存在两个核心问题：

1. 所有<td>被放在同一个<tr>中，导致内容无法按双列排布
2. 在<table>内部使用<div>，违反HTML表格规范，破坏了表格结构

要实现目标双列布局，需将数据拆分为左右两栏，逐行配对生成表格行，每一行包含左右两个单元格。修改后的代码如下：

const data = [
  {Location:"NY", Seal: "loose"},
  {Location:"MD", Seal: "intact"},
  {Location:"DC", Seal: "good"},
  {Location:"KT", Seal: "bad"},
  {Location:"VI", Seal: "patty"},
  {Location:"WI", Seal: "broken"},
  {Location:"DT", Seal: "daily"},
  {Location:"PE", Seal: "weekly"}
]

// 计算数据分割点，处理奇数行时左栏多一行的情况
const splitIndex = Math.ceil(data.length / 2);
// 拆分数据为左右两栏
const leftColumn = data.slice(0, splitIndex);
const rightColumn = data.slice(splitIndex);

return (
  <table>
    {leftColumn.map((item, index) => {
      const rightItem = rightColumn[index];
      return (
        <tr key={index}>
          {/* 左栏单元格 */}
          <td>
            <p>
              ID <b>{index + 1}</b>:
              Location # <b>{item.Location}</b>
              Seal # <b>{item.Seal}</b>
            </p>
          </td>
          {/* 右栏单元格，存在数据时才渲染 */}
          {rightItem && (
            <td>
              <p>
                ID <b>{splitIndex + index + 1}</b>:
                Location # <b>{rightItem.Location}</b>
                Seal # <b>{rightItem.Seal}</b>
              </p>
            </td>
          )}
        </tr>
      );
    })}
  </table>
);

关键说明 #

• 通过splitIndex将数据拆分为左右两部分，确保奇数行时左栏自动多一行
• 遍历左栏数据，每一行生成一个<tr>，包含左右两个<td>，右栏无数据时不渲染空单元格
• 移除了不符合表格规范的<div>标签，保证HTML结构合法

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