next.js PrismaMap到表导致Next 13中的水合错误

siv3szwd  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(80)

我刚刚在Next.js 13中启动了一个简单的项目。在我的项目中没有做太多其他的事情,下面的内容导致了一个水合错误:

import { PrismaClient } from "@prisma/client";

export default async function Events() {
  const prisma = new PrismaClient();
  const issues = await prisma.event.findMany();
  return (
    <div>
      <h1>Events</h1>
      <table>
        <tr>
          <th>Title</th>
          <th>Description</th>
          <th>Code</th>
        </tr>
        {issues.map((issue, key) => (
          <tr key={key}>
            <td>{issue.title}</td>
            <td>{issue.description}</td>
            <td>{issue.code}</td>
          </tr>
        ))}
      </table>
    </div>
  );
}

我怀疑这可能与Next.js 13相关,但看不到任何可能触发此事件的内容(我假设视图只显示一次,它将根据新的next行为加载)。
布局只会将其 Package 在div中:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>App</title>
        <meta name="description" />
      </head>
      <body>{children}</body>
    </html>
  )
}

有什么想法吗?

dnph8jn4

dnph8jn41#

将数据表的信头数据列 Package 在中,并将主体 Package 在中,就解决了这个问题。
这是根据这里的讨论:https://github.com/vercel/next.js/discussions/36754

相关问题