Next.js渲染表格时Hydration失败问题排查求助

问题根源分析 #

• 列数不匹配：第二个<tr>仅包含3个<td>，但表头定义了5列，服务端渲染的表格结构与客户端不一致，触发Hydration错误。
• 无效表格结构：data.map生成的<tr>中，<BiTrash>直接作为<tr>的子元素，未包裹在<td>内。表格行的直接子元素必须是<td>或<th>，这种非法结构会导致服务端与客户端DOM树不匹配。

修复后的代码 #

<table>
  <thead>
    <tr>
      <th className="champ th">placeholder</th>
      <th className="champ th">placeholder</th>
      <th className="champ th">placeholder</th>
      <th className="champ  th">placeholder</th>
      <th className="champ">placeholder</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" />
      </td>
      <td>
        <input type="number" />
      </td>
      <td>
        <input type="number" />
      </td>
      <td>
        <input type="number" />
      </td>
      <td>
        <button type="button">+</button>
      </td>
    </tr>
    <tr>
      <td>
        <span className=" input-error text-danger">{errorMessage}</span>
      </td>
      <td>
        <span className="input-error text-danger">{errorMessage}</span>
      </td>
      <td>
        <span className="input-error text-danger">
          {errorMessage.product_unit_price}
        </span>
      </td>
      {/* 补充缺失列，保持与表头列数一致 */}
      <td></td>
      <td></td>
    </tr>
    {data.map((selected, index) => {
      return (
        <tr key={index}>
          <td>
            <input type="text" />
          </td>
          <td>
            <input type="number" />
          </td>
          <td>
            <input type="number" />
          </td>
          <td>
            <input type="number" />
          </td>
          {/* 将图标包裹在td内，符合表格结构规范 */}
          <td>
            <BiTrash />
          </td>
        </tr>
      );
    })}
  </tbody>
</table>

关键修复点 #

1. 为列数不足的<tr>补充空<td>，确保每行列数与表头完全匹配。
2. 将<BiTrash>组件包裹在<td>中，遵循表格DOM结构的强制规范。
3. 为map生成的列表项添加key属性，符合React列表渲染要求，避免潜在的渲染不一致问题。

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