当页面一打开就关注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;
从昨天开始我就搜索了所有的论坛。我找不到解决办法
1条答案
按热度按时间8iwquhpp1#
我认为这个错误是由于预渲染的react树和浏览器中渲染的react树之间的差异造成的。
查看下面的链接了解更多信息https://nextjs.org/docs/messages/react-hydration-error
在我看来,你可以通过在文件顶部设置“使用客户端”来禁用预渲染。