javascript React 18.2.0 Next js 13 - Hydration failed because the initial UI does not match...问题

ca1c2owp  于 2023-05-21  发布在  Java
关注(0)|答案(1)|浏览(94)

当页面一打开就关注input元素时,我得到了这个错误。当我等待几秒钟并关注input元素时,我没有得到错误。我不能解决这个错误。当我删除链接组件时,错误得到解决。
为了确定,我安装了LATEST DEFAULT NEXT JS 13.1.5项目,直接添加了input元素,同样的问题仍然存在。Error image
Error detailed image

import SectionIdentifier from "components/section-identifier";
import Link from "next/link";

function ProfilePage() {
  return (
    <>
      <SectionIdentifier title={"Sifarişlərim"} description={"Bütün sifarişləriniz burada görünməkdədir. Sifarişlər haqqında məlumat üçün ətraflı yazısına daxil olun."} />
      <div className="flex items-center justify-between">

        {/* When i deleted this div section problem is fixed */}
        <div className="flex gap-x-11">
          <Link className="font-medium" href="/asdasd">
            Bütün məhsullar (133)
          </Link>
          <Link className="text-black/50" href="/asdasd">
            Populyar
          </Link>
          <Link className="text-black/50" href="/asdasd">
            Yeni
          </Link>
          <Link className="text-black/50" href="/asdasd">
            Endirimli
          </Link>
        </div>
        {/* When i deleted this div section problem is fixed */}

        <input type="text" placeholder="text" />

      </div>
    </>
  );
}

export default ProfilePage;

从昨天开始我就搜索了所有的论坛。我找不到解决办法

8iwquhpp

8iwquhpp1#

我认为这个错误是由于预渲染的react树和浏览器中渲染的react树之间的差异造成的。
查看下面的链接了解更多信息https://nextjs.org/docs/messages/react-hydration-error
在我看来,你可以通过在文件顶部设置“使用客户端”来禁用预渲染。

相关问题