React 16:警告:预期的服务器HTML在<body>中包含匹配的<div>

Question

React 16:警告:预期的服务器HTML在<body>中包含匹配的<div>

Ant*_*ist 19 reactjs

自升级到React 16后,我收到以下错误消息:

warning.js:33 Warning: Expected server HTML to contain a matching <div> in <body>.

通常导致此错误消息的原因是什么？如何修复？

Answer 1

Luc*_*cia 18

如果您正在使用 NextJS 之类的服务器端渲染，请删除最近的代码并比较您是否尝试直接访问 DOM 尚不能保证的 Component 范围内的变量。对我来说，它是：

import { i18n } from 'i18n'

export default function SomeComponent() {
    const initLanguage = i18n.language              <---- causing error

    return ...
}

Run Code Online (Sandbox Code Playgroud)

如果您需要访问这些属性，请在内访问它useEffect，以确保到document那时已经建立。它有点相当于componentDidMount()：

import { i18n } from 'i18n'
import { useEffect, useState } from 'react'

export default function SomeComponent() {
    const [initlanguage, setInitLanguage] = useState('en')

    useEffect(() => setInitLanguage(i18n.language), [])

    return ...
}

Run Code Online (Sandbox Code Playgroud)