Hydration failed because the initial UI does not match what was rendered on the server.问题原因之一

一. 环境

next.js: “12.1.6”

react.js: “18.1.0”

三. 报错内容

三. 报错原因

3.1 第一种情况

p标签嵌套了p标签或者p标签嵌套了div标签，如下如：

将p的子标签改为span或者将父级p标签改为div也行。

一般来说，我们不会用p来嵌套div，也不能来嵌套。

需要注意的就是next.js中不允许p标签嵌套p标签。

3.1 第二种情况

首页有如下弹框：

当勾选确认且点击Confirm后，就会在本地存储一个状态，有这个状态的话就不再弹这个弹框，没有的话就需要弹出来。代码如下：

const [showHomeModel, setShowHomeModel] = useState(true)
useEffect(() => {if (localStorage.getItem('alreadyChecked')) {setShowHomeModel(false)} else {setShowHomeModel(true)}
}, [])
// 弹框组件
<HomeModel visibleInfo={showHomeModel} changeVisible={setShowHomeModel} />

结果每次进入页面都会报上面那个错误！

仔细分析了下，首次进入页面时，是没有状态的，所有useEffect里面走的是else条件，会把showHomeModel设置为true，而useState设置的showHomeModel初始值也为true，这样就引起了上面的报错。

所以代码改一下const [showHomeModel, setShowHomeModel] = useState(false)就不报那个错了。没有状态的时候进入页面也一定会拉起弹窗。

（完）

Hydration failed because the initial UI does not match what was rendered on the server.问题原因之一相关推荐

Hydration failed because the initial UI does not match what was rendered on the server
react18在nextjs中包错,解决方法: 1.方法1 react 18降到17 2. 方法2 如下图参考: https://github.com/vercel/next.js/discussi ...
ERROR 220624 --- [ntainer#2-2-C-1] o.s.k.l.KafkaMessageListenerContainer : Failed to set initial
完整报错: org.apache.kafka.common.errors.TimeoutException: Timeout of 60000ms expired before the positio ...
打开eclipse出现Failed to load the JNI shared library “D:\java\jdk\bin\...\jre\bin\server\jvm.dll”如何解决？
eclipse打开的时候出现Failed to load the JNI shared library "D:\java\jdk\bin-\jre\bin\server\jvm.dll&qu ...
The job failed. Unable to determine if the owner (SINOOCEANLAND\v-baidd) of job sendmail has server
执行作业时报错: The job failed. Unable to determine if the owner (SINOOCEANLAND\v-baidd) of job sendmail h ...
导入AAR报错 Failed to transform file 'xxx.aar' to match attributes {artifactType=jar}
Failed to transform file 'xxx.aar' to match attributes {artifactType=jar} Failed to transform file ' ...
报错：FAILED: Execution Error, return code 2 from org.apache.hadoop.hive.ql.exec.mr.MapRedTask原因查找
项目场景: 使用hive分析.处理数据时问题描述执行hive语句后,报错:FAILED: Execution Error, return code 2 from org.apache.hadoop ...
android 项目Failed to transform file ‘xxxxx.jar‘ to match attributes 解决方法
最近接入第三方依赖时报错 Execution failed for task ':vivoads:compileDebugKotlin'. > Could not resolve all fil ...
Integrity check failed for “antd“ (computed integrity doesn‘t match our records
1.清理缓存 yarn cache clean2.安装依赖命令参考 https://classic.yarnpkg.com/en/docs/cli/install/yarn install --no ...
原理实践 SSR中redux的使用
原理实践 SSR中redux的使用文章目录原理实践 SSR中redux的使用 @reduxjs/toolkit 主要API 快速上手创建使用 redux在SSR中的使用安装 yarn add ...