是什么导致了这个 next.js React Hydration 错误？
[英]What is causing this next.js React Hydration Error?
问题描述
I have this piece of code in next.js, and it's causing some sort of hydration error, "client side is different to what the server side rendered" I still don't fully understand what causes this type of error, aside from invalid HTML like a within a
我在 next.js 中有这段代码，它导致了某种水合作用错误，“客户端与服务器端呈现的内容不同”我仍然不完全理解导致此类错误的原因，除了无效的 HTML在一个
. . The code is the following, I would appreciate if someone could explain what is going wrong, and what could be changed to avoid it in the future.代码如下，如果有人能解释出什么问题，以及将来可以更改什么以避免它，我将不胜感激。
<head>
<title>{data['listings'][0]['title']}</title>
<meta name="robots" context="noindex"/>
<meta charset="utf-8"/>
<meta property="og:title" id="ogtitle" content="{data['listings'[0]['title]}"/>
<meta property="og:image" content="{data['media'][0]['url']}"/>
<meta property="og:url" id="oglink" content="{window.location.href}"/>
<meta property="og:description" id="ogdesc" content="Vea la propiedad ¡en tu navigador web!"/>
</head>
<body>
<div class="center">
<div class="topnav">
<button id="es" class="w3-button">ESPAÑOL</button>
<button id="en" class="w3-button" onclick="becomeEnglish()">ENGLISH</button>
</div>
<h1>{data['listings'][0]['title']}</h1>
<h2>{data['address'] != null ? data['address'] + ', ': ''}{data['city'] != null ? data['city'] + ', ': ''}{data['state'] != null ? data['state'] + ', ': ''}{data['country'] != null ? data['country']: ''}</h2>
<div class="pic" id="pics">
<div id="pic-parent">
<button id="left-but" class="slide-but" onclick="plusDivs(-1)">❮</button>
<button id="right-but" class="slide-but" style={{right: 0}} onclick="plusDivs(+1)">❯</button>
</div>
<div id="thing">
<div class="item" style={{backgroundColor: '#FFD54E', width: '100%'}}><p id="price"></p></div>
<div class="item"><img class="icon" src="/assets/1.png"/><p id="size"></p></div>
<div class="item"><img class="icon" src="/assets/2.png"/><p id="area"></p></div>
<div class="item"><img class="icon" src="/assets/3.png"/><p id="bedrooms"></p></div>
<div class="item big-boi"><img class="icon" src="/assets/4.png"/><p id="fullbath"></p></div>
<div class="item big-boi"><img class="icon" src="/assets/5.png"/><p id="halfbath"></p></div>
<div class="item big-boi"><img class="icon" src="/assets/6.png"/><p id="parking"></p></div>
</div>
<br/>
</div>
<p>{data['listings'][0]['description']}</p>
</div>
</body>
As well, I do have some CSS, and it might be causing it as well due to the reliance on the window width?同样，我确实有一些 CSS，由于依赖 window 宽度，它也可能导致它？ Can somebody comment on that possibility?有人可以评论这种可能性吗？
I was trying to remove all of the lines involving the data variable which is being pulled from a remote API, but that didn't work.我试图删除所有涉及从远程 API 拉取的data变量的行，但这没有用。
1 个解决方案
解决方案1
0 2022-12-31 09:12:49
Hydration error occur when the initial UI does not match what was rendered on the server,means when the HTML from server didn't match the html with client.当初始 UI 与服务器上呈现的内容不匹配时，会发生 Hydration 错误，这意味着来自服务器的 HTML 与客户端的 html 不匹配。 This could happen by many reasons, mainly because of css styles or some HTML tags not matching发生这种情况的原因有很多，主要是因为 css styles 或一些 HTML 标签不匹配
For ex - initially the button color is red but when user click on it button color becomes black, so this may cause hydration error例如 - 最初按钮颜色为红色，但当用户单击它时按钮颜色变为黑色，因此这可能会导致水合作用错误
To avoid hydration error most simple way is to wait for the DOM to be rendered first and use useEffect to check if it's rendered or not为了避免水合作用错误，最简单的方法是等待 DOM 首先被渲染，然后使用 useEffect 检查它是否被渲染
Their are many more ways to avoid it, you can refer to this article to know more solutions - https://javascript.plainenglish.io/how-to-solve-hydration-error-in-next.js-a50ec54bfc02他们还有很多方法可以避免它，您可以参考这篇文章了解更多解决方案 - https://javascript.plainenglish.io/how-to-solve-hydration-error-in-next.js-a50ec54bfc02
Hope it helps希望能帮助到你
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.