未捕获的不变违规：对象作为 React 子对象无效（发现：带有键 {$$typeof, render} 的对象）

Question

React 中的错误处理和警报

当我将 <Alert /> 带到 <Header /> 标签正下方的主要应用程序组件时，一旦安装该组件，它就会抛出此错误。

虽然我从主应用程序组件中删除了 <Alert />，但它工作正常。这是在我将 <Alert /> 带到主应用程序组件之前浏览器正确呈现的方式， click here.

这是之前有效的代码片段：

class App extends Component {
render() {
    return (
        <Provider store={store}>
            <AlertProvider template={AlertTemplate} {...alertOptions}>
                <Fragment>
                    <Header />
                    <div className="container">
                        <Dashboard />
                    </div>
                </Fragment>
            </AlertProvider>
        </Provider>
    )
}

}

我希望在浏览器中获得正确的警报消息片段。但是，在我尝试使用来自 this Github 存储库的名为 react-alert 的第三方包后，浏览器中没有呈现任何内容。

以下是因控制台错误而失败的代码片段。

class App extends Component {
render() {
    return (
        <Provider store={store}>
            <AlertProvider template={AlertTemplate} {...alertOptions}>
                <Fragment>
                    <Header />
                    <Alerts />
                    <div className="container">
                        <Dashboard />
                    </div>
                </Fragment>
            </AlertProvider>
        </Provider>
    )
}

这是我的 Alerts.js 组件：

import React, { Component, Fragment } from 'react';
import { withAlert } from 'react-alert';
export class Alerts extends Component {
    componentDidMount() {
        this.props.alert.show('It Works');
    }
    render() {
        return <Fragment />;
    }
}
export default withAlert(Alerts);

在控制台中看到了给定的错误：Error in the console

Answer 1

通常是错误，

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, render})

当你不这样做时抛出，

render multiple nodes inside one single parent node(which is not in this case).

import files properly

如果第二个条件也通过，也许应该查看您正在使用的组件的文档..

Answer 2

尝试在 Alert.js

更改您的代码

发件人：

export default withAlert(Alerts);

收件人：

export default withAlert()(Alerts);

Answer 3

请正确检查文档。在你的代码中有

export default withAlert(Alerts);

但在文档中，要与 HOC 一起使用，您应该这样写

export default withAlert()(Alerts)

未捕获的不变违规：对象作为 React 子对象无效（发现：带有键 {$$typeof, render} 的对象）

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, render})

reactjs

react-redux

react-dom

React 中的错误处理和警报