3

当我进入我的 React Router-dom时，我将我的路由指向一个验证页面。无论是否登录事件目标，我都会将我的路线（历史）推送到所需页面，但我不断收到以下错误。

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)

应用程序.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)
);

必需的Auth.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 实现时，一切都完美呈现。

4

2 回答 2

0

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

IE

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

或者

export default (ComposedComponent) =>{
  class DashBoard extends Component
于 2020-11-25T16:44:02.963 回答
-2

我在你的代码中发现了几个错误，首先你的函数定义是错误的，export default function(ComposedComponent)一定export default function ComposedComponent () {}不要把这个类class Authentication extends Component {}放在函数里面，如果你想让它成为一个组件，为此创建另一个函数。还要定义您要使用的组件类型：基于功能的或基于类的。

当您的代码有这几个错误时，我们不知道如何帮助您。请检查它们并使用更新的代码再次返回。

于 2020-03-17T08:31:11.933 回答