为什么在Next.js中使用表会引发水化错误？

Question

在这段代码中，我在使用标记时遇到了问题。当我使用tr标记时，错误occurs.It表示未处理的运行时错误:水合失败，因为初始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 自动中添加了一个自动。因此，即使您跳过它，它也将在DOM代码中结束。正如答案中提到的，这是针对较旧的HTML版本的。这是一个演示。检查代码并将其与呈现的实际DOM进行比较。

我猜next.js在服务器端生成时默认不会添加tbody。这就是造成这种错配的原因。