html - 为什么在 Next.js 中使用表格会引发水合作用错误？

Question

在这段代码中，我在使用标签时遇到了问题。当我使用 tr 标记时发生错误。它说 Unhandled Runtime Error错误:Hydration 失败，因为初始 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

这是一个 open issue在Next.js repo 。问题是因为您没有 <tbody>或 <thead>包装你的行。

虽然它们没有指定给mandatory为了正确呈现表格，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>

值得注意的是，浏览器添加了一个 tbody在table里面automatically .所以即使你跳过它，它最终也会出现在你的 DOM 代码中。这适用于答案中提到的旧 HTML 版本。这是一个demo为了那个原因。检查代码并将其与呈现的实际 DOM 进行比较。

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