为什么使用 Next.js 中的表会引发水合作用错误？

Question

在此代码中，我在使用标签时遇到问题。 当我使用 tr 标记时发生错误。它说未处理的运行时错误错误：水化失败，因为初始 UI 与服务器上呈现的内容不匹配。

import React from 'react'
import {useState} from 'react'


const port = () => {
  return (
    <div className="ml-14">
      <div className="profile">
        <h1 className="mt-5 font-bold">Nasvirat</h1>
        <p className="mt-5">total balance : </p>
      </div>
      <div className="portfolio">
        <h2 className="mt-7">Holding</h2>

        <table>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
        </tr>
        <tr>
          <td>Peter</td>
          <td>Griffin</td>
        </tr>
        <tr>
          <td>Lois</td>
          <td>Griffin</td>
        </tr>
        </table>
      </div>
    </div>
  )
}

export default port

你知道为什么会发生这种情况以及如何解决它吗？

Answer 1

这是Next.js库中的未决问题。 问题来自于您没有<tbody>或<thead>包装您的行。

尽管它们没有被指定为正确呈现表格所必需的， next.js不知何故无法识别这一点。

我的假设是，因此在服务器和客户端上运行的代码存在差异。

尝试添加这个：

        <table>
        <tbody>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
        </tr>
        <tr>
          <td>Peter</td>
          <td>Griffin</td>
        </tr>
        <tr>
          <td>Lois</td>
          <td>Griffin</td>
        </tr>
        </tbody>
        </table>

值得注意的是，浏览器会自动在table中添加一个tbody 。 所以即使你跳过它，它最终也会出现在你的 DOM 代码中。 如答案中所述，这是针对较旧的 HTML 版本。 这是一个演示。 检查代码并将其与呈现的实际 DOM 进行比较。

我猜next.js在服务器端生成时默认不添加tbody 。 这就是导致不匹配的原因。