为什么我会收到“对象作为 React 子项无效”错误？

Question

我有很多文件，但我认为问题出在我在 React 中的身份验证组件。 我基本上只想在用户登录时显示一个页面，否则我希望用户被重定向。

react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, WrappedComponent}). 如果您打算渲染子集合，请改用数组。

requireAuth.js

// function that can wrap any component to determine if it is authenticated

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { push } from "@lagunovsky/redux-react-router"; // not sure if this correct
export default function requireAuth(Component) {
  class AuthenticationComponent extends React.Component {
    constructor(props) {
      super(props);
      this.checkAuth();
    }
    componentDidUpdate(prevProps, prevState) {
      this.checkAuth();
    }

    checkAuth() {
      // if not authenticated then it is redirected
      if (!this.props.isAuthenticated) {
        const redirectAfterLogin = this.props.location.pathname;
        this.props.dispatch(push(`/login?next=${redirectAfterLogin}`));
      }
    }
    // if authenticated then renders the component
    render() {
      return (
        <div>
          {this.props.isAuthenticated === true ? (
            <Component {...this.props} />
          ) : null}
        </div>
      );
    }
  }

  AuthenticationComponent.propTypes = {
    isAuthenticated: PropTypes.bool.isRequired,
    location: PropTypes.shape({
      pathname: PropTypes.string.isRequired,
    }).isRequired,
    dispatch: PropTypes.func.isRequired,
  };

  // checks isAuthenticated from the auth store
  const mapStateToProps = (state) => {
    return {
      isAuthenticated: state.auth.isAuthenticated,
      token: state.auth.token,
    };
  };

  return connect(mapStateToProps)(AuthenticationComponent);
}

应用程序.js

class App extends Component {
  render() {
    return (
      <div>
        <Root>
          <ToastContainer hideProgressBar={true} newestOnTop={true} />
          <Routes>
            <Route exact path="/" element={<Home />} />
            <Route path="/closet" element={requireAuth(Closet)} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Root>
      </div>
    );
  }
}

我做了一些挖掘，但找不到这样的问题。

Answer 1

错误是因为在这一行：

<Route path="/closet" element={React.createComponent(requireAuth(Closet))} />

您将实际的class定义传递给element属性，而不是 class 的实例（这将是 React 组件）。 要解决此问题，您可以使用React.createElement ：

class App extends Component {
  render() {
    return (
      <div>
        <Root>
          <ToastContainer hideProgressBar={true} newestOnTop={true} />
          <Routes>
            <Route exact path="/" element={<Home />} />
            <Route path="/closet" element={React.createElement(requireAuth(Closet))} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Root>
      </div>
    );
  }
}

Answer 2

因为 Route 的元素道具需要一个ReactNode ，但是requireAuth(Closet)的类型是() => React.ReactNode ，你可以这样改变你的 App.js ：

const AuthComponent = requireAuth(Closet);

class App extends Component {
  render() {
    return (
      <div>
        <Root>
          <ToastContainer hideProgressBar={true} newestOnTop={true} />
          <Routes>
            <Route exact path="/" element={<Home />} />
            <Route path="/closet" element={<AuthComponent />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Root>
      </div>
    );
  }
}