為什么我會收到“對象作為 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>
    );
  }
}