使用Trpc/Rect Query的Next.JS中的水合错误(即使不显示提取的数据)

Question

const Home: NextPage = () => {
const [filterPublishedPosts, setFilterPublishedPosts] = useState(false)
const { data, isLoading } = trpc.item.getAllPosts.useQuery({
text: "from tRPC", filters: {
filterPublishedPosts: filterPublishedPosts
}
});
return (
<main>
<button onClick={() => {
setFilterPublishedPosts(!filterPublishedPosts)
}}>
Show Only Published Posts
</button>
// .... at some point, display some data here
</main>
);
};
export default Home;

我在前端使用useState来跟踪用户想要看到的内容，然后将其作为变量传递给trpc/request查询。

为什么它会让我出现水合错误？不确定我是否理解为什么在这种情况下服务器/客户端上的数据会有所不同？但我得到了：

错误：水合失败，因为初始UI与>服务器

点击此处查看更多信息：https://nextjs.org/docs/messages/react-hydration-error

但我不明白，因为即使我没有渲染任何数据，也会出现水合错误！只是拿来而已。

Answer 1

控制台中应该有更多信息。这可能是因为错误的HTML语义。点击此处了解更多信息。