对象作为 React 子对象无效（找到：带键的对象{$$typeof，render}）。如果您要渲染子对象的集合，请改用数组

Question

我收到以下错误：

Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, render}). If you meant to render a collection of children, use an array instead.

添加Alerts.js 组件后出现此错误。如果我删除组件Alert.js，它可以正常工作，并在App.js中添加此组件会出现此错误。

//Alert.js
import React, { Component, Fragment } from "react";
import { withAlert } from "react-alert";
export class Alerts extends Component {
  componentDidMount() {
    this.props.alert.show("Its, Worked");
  }
  render() {
    return <Fragment />;
  }
}
export default withAlert(Alerts);

// App.js file here I want to import Alerts.js

........// More Imports
import { positions, Provider as AlertProvider } from "react-alert";
import AlertTemplate from "react-alert-template-basic";
import Alerts from "./layout/Alerts";
....... // More Code
//ALert Options
const alertOptions = {
  timeout: 3000,
  position: positions.TOP_CENTER,
};

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

Answer 1

基于documentation，您应该像这样调用withAlert：

export default withAlert()(Alerts);