预期服务器 HTML 在 <table> 中包含匹配的 <tr> / Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配

Question

下一个js 13.2.3

Next js 不能使用 table 元素。

"use client";
export default function index() {
  return (
            <table>
                <tr>
                    <th>Company</th>
                    <th>Contact</th>
                    <th>Country</th>
                </tr>
                <tr>
                    <td>Alfreds Futterkiste</td>
                    <td>Maria Anders</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>Centro comercial Moctezuma</td>
                    <td>Francisco Chang</td>
                    <td>Mexico</td>
                </tr>
            </table>
  )
}

它有效，但我收到错误。

Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <tr> in <table>.

我应该停止使用这个元素还是可以解决这个问题？

https://stackblitz.com/edit/nextjs-jvjltx?file=app%2Fpage.js - 示例

Answer 1

此问题已在此处报告：https ://github.com/vercel/next.js/discussions/36754

将表格内容包裹起来thead并tbody解决它。

export default function index() {
  return (
    <table>
      <thead>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
      </tbody>
    </table>
  );
}

修复：https://stackblitz.com/edit/nextjs-xb5mix? file=app/page.js