Trpc /React 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 / keep query。

为什么它会给我一个水化的错误？我不知道为什么在这种情况下，服务器/客户机上的数据会有所不同？但我明白：

错误:水合失败是因为初始UI不匹配在>服务器上呈现的内容。

请参阅更多信息：https://nextjs.org/docs/messages/react-hydration-error

但是，不要理解，因为水化错误出现了，即使我没有呈现任何数据！只是去取。

Answer 1

控制台中应该有更多的信息。这可能是因为HTML语义错误。更多信息，here。