英文:
Expected server HTML to contain a matching <tr> in <table> / Hydration failed because the initial UI does not match what was rendered on the server
问题
Next.js 13.2.3
Next.js 无法使用表格元素。
"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: 由于初始 UI 与服务器渲染的内容不匹配，因此数据重写失败。
警告：预期服务器 HTML 包含与 <table> 中的 <tr> 匹配的内容。
我应该停止使用这个元素还是可以修复这个问题？
英文:
Next js 13.2.3
Next js cannot use the table element.
"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>
)
}
It works but I get an error.
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>.
Should I stop using this element or can I fix the problem?
https://stackblitz.com/edit/nextjs-jvjltx?file=app%2Fpage.js - example
答案1
得分: 5
这个问题已经在这里报告了：https://github.com/vercel/next.js/discussions/36754
使用thead和tbody包装表格内容可以解决这个问题。
修复：https://stackblitz.com/edit/nextjs-xb5mix?file=app/page.js
英文:
This issue has been reported here: https://github.com/vercel/next.js/discussions/36754
Wrapping the table content with thead and tbody solves it.
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>
);
}
Fix: https://stackblitz.com/edit/nextjs-xb5mix?file=app/page.js
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论