React表格rowspan渲染异常：子项映射与行合并问题求助

问题根源 #

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

• 在单个<tr>内循环渲染所有子项的<td>，导致child name和child id列生成了多余单元格，直接破坏表格列结构，引发错位。
• 没有为每个子项创建独立行，仅靠rowspan无法让子项对应到正确的行位置，导致仅显示两行。

修复后的代码 #

function App() {
  let response = [
    {
      id: 134,
      user_name: 'abc',
      phone_number: 1234567890,
      children: [
        { id: 46, user_name: 'Sid', phone_number: 9834763467 },
        { id: 50, user_name: 'Tom', phone_number: 9834763467 },
      ],
    },
    {
      id: 948,
      user_name: 'def',
      phone_number: 9823437483,
      children: [
        { id: 20, user_name: 'Lina', phone_number: 9834763467 },
      ],
    },
    {
      id: 865,
      user_name: 'abc',
      phone_number: 1234567890,
      children: [
        { id: 60, user_name: 'Nikk', phone_number: 9834763467 },
        { id: 15, user_name: 'Mina', phone_number: 9834763467 },
      ],
    },
  ];

  return (
    <div className="App">
      <table border="1"> {/* 加border方便查看结构，可自行移除 */}
        <thead>
          <tr>
            <th>Id</th>
            <th>name</th>
            <th>child name</th>
            <th>child id</th>
          </tr>
        </thead>
        <tbody>
          {response.map((parent) =>
            parent.children.map((child, childIndex) => (
              <tr key={`${parent.id}-${child.id}`}>
                {/* 仅第一个子项渲染带rowspan的父项列 */}
                {childIndex === 0 && (
                  <>
                    <td rowSpan={parent.children.length}>{parent.id}</td>
                    <td rowSpan={parent.children.length}>{parent.user_name}</td>
                  </>
                )}
                <td>{child.user_name}</td>
                <td>{child.id}</td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
}

export default App;

关键改动说明 #

1. 双层循环构建行：外层遍历父项，内层遍历每个父项的子项，为每个子项生成独立的<tr>，确保每行对应一个子项。
2. 控制父项列的渲染时机：仅在每个父项的第一个子项中渲染带rowspan的父项id和user_name列，rowspan值设为子项数量，让这两个单元格跨对应行数。后续子项的行跳过前两列，由父项的单元格跨行覆盖。
3. 唯一key值：使用${parent.id}-${child.id}作为行的key，确保每个行的key唯一，符合React列表渲染要求。

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