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)就不报那个错了。没有状态的时候进入页面也一定会拉起弹窗。

（完）