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

Posted 2023-02-19

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

【英文标题】：Objects are not valid as a React child (found: object with keys$$typeof, render).If you meant to render a collection of children,use anarrayinstead对象作为 React 子对象无效（找到：带键的对象$$typeof，render）。如果您要渲染子对象的集合，请改用数组

【发布时间】：2021-10-03 10:06:37

【问题描述】：

我收到以下错误：

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>
    );
  

【参考方案1】：

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

export default withAlert()(Alerts);