我一直在学习React/Next JS，我正在整理一个基本的表，该表基于来自这个公共API端点的项目数组动态填充：https://jsonplaceholder.typicode.com/todos
获取这些数据时工作正常，只是我得到了一个react-hydration-error，我相信这与我的array.map函数有关。我假设这与async-await函数和渲染组件的其余部分之间的差异有关，但我不确定如何在具有相同功能的情况下修复这个问题。
错误是：
未处理的运行时错误水合失败，因为初始UI与服务器上呈现的不匹配。
警告：服务器HTML应在中包含匹配项。
查看更多信息：https://nextjs.org/docs/messages/react-hydration-error
Component Stack table section main div Layout Home App
我的index.js代码是：
import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
import React, { useState, useEffect } from 'react';
export async function getStaticProps(context) {
const res = await fetch('https://jsonplaceholder.typicode.com/todos');
const data = await res.json();
return {
props: {entries: data},
}
}
export default function Home({entries}) {
return (
<Layout home>
<Head>
<title>{siteTitle}</title>
</Head>
<section className={utilStyles.headingMd}>
<table>
<tr>
<th>Title</th>
<th>Completed</th>
</tr>
{entries.map(entry => (
<div key = {entry.id}>
<tr>
<td><a><h3>{entry.title}</h3></a></td>
<td><a><h3>{JSON.stringify(entry.completed)}</h3></a></td>
</tr>
</div>
))};
</table>
</section>
</Layout>
);
}我的layout.js代码很简单：
import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
const name = 'Email Dashboard';
export const siteTitle = 'Email Dashboard';
export default function Layout({ children, home }) {
return (
<div className={styles.container}>
<Head>
</Head>
<header className={styles.header}>
{home ? (
<h1 className={utilStyles.heading2Xl}>{name}</h1>
) : (
<h1 className={utilStyles.heading2Xl}>{name}</h1>
)}
</header>
<main>{children}</main>
{!home && (
<div className={styles.backToHome}>
<Link href="/">← Back to home</Link>
</div>
)}
</div>
);
}如果你需要任何进一步的信息，或者你能提供一个简单的解决方法，请告诉我，谢谢
我试着逐渐删除部分的列表，完全删除对列表的引用，只是在静态文本占位符中编写，我仍然会遇到水合问题。
1条答案
按热度按时间gkn4icbw1#
尝试从标记表中删除div标记
也许你可以把它改成这样：