javascript - 错误 : Objects are not valid as a React child (found: object with keys {$$typeof, 类型、比较、WrappedComponent、显示名称})

Question

当我进入我的 React Router-dom 时，我将我的路由指向验证页面。无论目标是否登录，我都会将我的route(history) 推送到所需的页面，但我不断收到以下错误消息。

Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, WrappedComponent, displayName}). If you meant to render a collection of children, use an array instead.
    in Unknown (at RequiredAuth.js:34)
    in RequireAuth (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in Route (at App.js:23)
    in Switch (at App.js:18)
    in Router (at App.js:17)
    in div (at App.js:16)
    in App (created by ConnectFunction)
    in ConnectFunction (at Dashbord.js:14)
    in div (at Dashbord.js:14)
    in DashBoard (created by ConnectFunction)
    in ConnectFunction (at src/index.js:10)
    in Provider (at src/index.js:9)

App.js

import React from 'react';
import { Router, Route, Redirect, Switch } from 'react-router-dom';
import { history } from './configureStore';
import { allRoutes } from './routes';
import NotFound from './pages/404';
import RequiredAuth from './components/RequiredAuth';
import NotRequiredAuth from './components/NotRequiredAuth';
 import DashBoard from './pages/Dashbord';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

class App extends React.Component {

    render() {
        return (
            <div style={{ height: '100%' }}>
                <Router history={history}>
                    <Switch>
                        {allRoutes
                            .filter(route => route.visible)
                            .map((route, index) => {
                                return  (
                                    <Route
                                        exact={route.exact}
                                        path={route.path}
                                        key={index}
                                        component={RequiredAuth(route.component)}
                                    />
                                )  
                            })}
                        <Route path={'/:404_path'} key={'404'} component={NotFound} />
                        <Redirect to="/dashboard" />
                    </Switch>
                </Router>

            </div>
        );
    }
}

App.displayName = 'App';

const mapDispatchToProps = dispatch => {
    return bindActionCreators({ }, dispatch);
};

const mapStateToProps = state => {
    return {

    };
};

export default DashBoard(
    connect(
        mapStateToProps,
        mapDispatchToProps
    )(App)
);

RequiredAuth.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import { history } from '../configureStore';

export default function (ComposedComponent) {
  class Authentication extends Component {

    constructor(props){
      super(props);
      this.props = props;
     }

    componentDidMount() {
      const { auth } = this.props
      if (!auth.success) {
        history.push('/login');
      }
    } 

    componentDidUpdate() {
      const { auth } = this.props
      if (!auth.success) { 
        history.push('/login');
      }
    }

    PropTypes = {
      router: PropTypes.object
    }

    render() {
      return <ComposedComponent {...this.props} />;
    }
  }

  Authentication.propTypes = {
    location: PropTypes.object
  }

  Authentication.displayName = 'RequireAuth'

  function mapStateToProps(state) {
    return { auth: state.auth };
  }

  const mapDispatchToProps = dispatch => bindActionCreators({   }, dispatch);


  return connect(mapStateToProps, mapDispatchToProps)(Authentication);
}

Dashbord.js

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ShouldRender } from '../components/basic/ShouldRender';

export default function(ComposedComponent) {
  class DashBoard extends Component {

    render() {
   const {auth} = this.props

   if (!auth.success) return <div>{ComposedComponent && <ComposedComponent />}</div>;

      return (
        <div>
         <ShouldRender if={!auth.success}>
            {ComposedComponent && <ComposedComponent />}
          </ShouldRender>

          <ShouldRender if={auth.success}>
            <div style={{ height: '100%' }}>
                 <div>

                  <div className='page-container'>

                    <main className='main-content bgc-grey-100'>
                      <div id='mainContent'>
                        <div className='row gap-20 masonry pos-r'>
                          <div className='masonry-item col-12'>
                            {ComposedComponent && <ComposedComponent />}
                          </div>
                        </div>
                      </div>
                    </main>
                    <footer className='bdT ta-c p-30 lh-0 fsz-sm c-grey-600'>
                      <span>
                        Copyright © {new Date().getFullYear()}{' '}
                        <a
                          href='https://dataintegrated.co.ke'
                          target='_blank'
                          title='Data Integrated'
                        >
                          Data Integrated Limited
                        </a>
                        . All rights reserved.
                      </span>
                    </footer>
                  </div>
                </div>
             </div>
          </ShouldRender>
        </div>
      );
    }
  }
  const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({   }, dispatch);
  };

  function mapStateToProps(state) {
    return {
      auth: state.auth
    };
  }

  DashBoard.propTypes = {

  };

  return connect(mapStateToProps, mapDispatchToProps)(DashBoard);
}

曾尝试使用 HOC React 官方页面，但当我实现此验证时，我总是会遇到此错误，但当我删除 HOC 实现时，一切都会完美呈现。

Answer 1

尝试在 HOC 中使用 return 语句或将函数更改为箭头函数

I.E

export default function(ComposedComponent) {
 return class DashBoard extends Component

或

export default (ComposedComponent) =>{
  class DashBoard extends Component