Question

自升级到React 16后，我收到以下错误消息：

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

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

Answer 1

如果您使用filemanager启动网络应用程序，则会看到此警告。

如果您的应用程序不使用服务器端呈现（filemanager <- read_html( myURL ) %>% html_nodes( xpath='//*[contains(@class, "filemanager")]' )），请使用ReactDOM.hydrate开始。

Answer 2

如果您的HTML代码类似于

<table>
  <tr>

您会收到此错误。
要解决此问题，请使用标签

<table>
  <tbody>
    <tr>

别忘了关闭标签！

Answer 3

我假设您正在使用ssr。该警告是关于在存在窗口对象之前尝试渲染的。你需要补水。

ReactDOM.hydrate(<App />, document.getElementById("home"))

我不了解的是，Express静态地为App组件提供了服务。为什么要在投放之前尝试渲染？发表评论。

Answer 4

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

import { i18n } from 'i18n'

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

    return ...
}

如果需要访问此类属性，请在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 ...
}

Answer 5

就我而言，这是因为使用了PersistGate和react-loadable。如果使用此库，则可以使用preloadAll而不是preloadReady

Answer 6

在我的情况下，我安装了REACTFUL，并且默认情况下安装它的渲染方式与众不同：

src / renderers / dom.js

ReactDOM.hydrate(
  <App initialData={window.__R_DATA.initialData} />,
  document.getElementById('root'),
);

src / renderers / server.js

const initialData = {
   appName: 'Reactful',
 };
return Promise.resolve({
   initialData,
   initialMarkup: ReactDOMServer.renderToString(
     <App initialData={initialData} />,
   ),
   pageData,
 });

注意initialData！

我已将其更改为 dom.js ，因此，对initialData的注意很重要：

const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate;
const initialData = {
  appName: 'Reactful',
};
renderMethod(
  <App initialData={initialData} />,
  document.getElementById('root'),
);

Answer 7

我通过使用材料UI尝试通过使用材料UI SnackBar在NextJS应用程序的react组件顶部执行const searchParams = new URLSearchParams(process.browser ? window.location.search : '')来实现此目的，通过将其放在{{1 }}钩子。

整个组件供参考：

useEffect

Answer 8

这似乎是因为Browsersync在服务器端不存在的客户端主体中插入脚本标记。因此，React无法附加到服务器渲染。

Answer 9

看起来您正试图在准备好之前访问 dom 中的道具。您可以使用这样的结构：

{(variable) && sameVariable}

React 16：警告：预期的服务器HTML包含匹配的<div> in

9 个答案: