高阶函数-元素类型无效：预期的字符串或类/函数但有对象

Question

我正在研究使用Mobx，React和Auth的教程（https://www.johnstewart.dev/firebase-auth-react-mobx/）。但是我收到此错误消息

错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到了：对象。检查“ Context.Consumer”的渲染方法。

我怀疑是由于以下代码。这是一个高级功能，将功能包装在路由器中以测试身份验证状态。

import React from "react";
import authStore from "../../store/authStore";
import { Redirect } from "react-router-dom";

const protectedRoute = (RouteComponent) => {
  if (authStore.loggedIn) {
    return RouteComponent;
  }
  return <Redirect to="/login" />;
};

export default protectedRoute;

app.js中的包装组件看起来像；

<Route path="/register" component={protectedRoute(Register)} />

我的理由是，当我手动将authStore.loggedIn更改为true时，一切都顺利通过了。但是，当我将authStore.loggedIn设置为false时，会出现错误。

毫无疑问，使用重定向非常简单，但是搜索stackoverflow并没有太大帮助，整个网络也没有帮助。有什么建议吗？

register.js文件，根据要求，尽管可以通过受保护的路由正确呈现。因此，我认为这不是问题所在。

import React, { useEffect, useState } from "react";
import { inject, observer } from "mobx-react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlusSquare } from "@fortawesome/free-solid-svg-icons";
import BootstrapTable from "react-bootstrap-table-next";
import filterFactory, {
  textFilter,
  selectFilter,
} from "react-bootstrap-table2-filter";
import rp from "request-promise";

import Spinner from "../layout/Spinner";

const Register = (props) => {
  const [dataLoaded, setdataLoaded] = useState(false);

  useEffect(() => {
    rp.get({
      uri: "http://localhost:5050/api/risk",
      json: true,
      headers: {
        "User-Agent": "Request-Promise",
      },
    })
      .then((risks) => {
        props.riskStore.riskList = risks;
        console.log("Risks successfully loaded.");
        setdataLoaded(true);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  const rowEvents = {
    onClick: (e, row, rowIndex) => {
      props.history.push(`/risk/${row._id}`);
    },
  };

  return dataLoaded ? (
    <div>
      <br />
      <h1 className="register-heading">Risk Register</h1>
      <div className="row">
        <div className="col-md-4">
          <p className="register-text">
            Please use the column headings to sort the register. To add a new
            task, click the button to the right.
          </p>
        </div>
        <div className="col-md-6"></div>
        <div className="col-md-2">
          <button
            className="btn btn-primary"
            onClick={() => props.history.push("/risk/new")}
          >
            <FontAwesomeIcon icon={faPlusSquare} /> New Task
          </button>
        </div>
      </div>

      <BootstrapTable
        keyField="id"
        data={props.riskStore.riskList}
        columns={risksColumns}
        filter={filterFactory()}
        filterPosition="top"
        striped={true}
        hover={true}
        condensed={true}
        rowEvents={rowEvents}
        bootstrap4={true}
      />
    </div>
  ) : (
    <Spinner />
  );
};

const selectOptions = {
  true: "Archived",
  false: "Active",
};

const archiveFormatter = (cell, row, rowIndex, colIndex) => {
  if (cell === true) {
    return <span>Archived</span>;
  } else {
    return <span>Active</span>;
  }
};

const risksColumns = [
  {
    dataField: "_id",
    text: "",
    hidden: true,
  },
  {
    dataField: "riskName",
    text: "Risk",
    filter: textFilter(),
    sort: true,
    headerStyle: (column, colIndex) => {
      return { width: "31%" };
    },
  },
  {
    dataField: "riskCategoryBroad.value",
    text: "Broad Risk Category",
    filter: textFilter(),
    sort: true,
    headerStyle: (column, colIndex) => {
      return { textAlign: "center" };
    },
    align: "center",
  },
  {
    dataField: "riskCategoryNarrow.value",
    text: "Narrow Risk Category",
    filter: textFilter(),
    sort: true,
    headerStyle: (column, colIndex) => {
      return { textAlign: "center" };
    },
    align: "center",
  },
  {
    dataField: "riskOfficerPrimary.value",
    text: "Responsible Officer (Primary)",
    filter: textFilter(),
    sort: true,
    headerStyle: (column, colIndex) => {
      return { width: "20%", textAlign: "center" };
    },
    align: "center",
  },
  {
    dataField: "grossRiskAssessment.grossRiskRating.label",
    text: "Gross Risk Rating",
    filter: textFilter(),
    sort: true,
    headerStyle: (column, colIndex) => {
      return { textAlign: "center" };
    },
    align: "center",
  },
  {
    dataField: "netRiskAssessment.netRiskRating.label",
    text: "Net Risk Rating",
    filter: textFilter(),
    sort: true,
    headerStyle: (column, colIndex) => {
      return { textAlign: "center" };
    },
    align: "center",
  },
  {
    dataField: "archived",
    text: "Archived",
    sort: true,
    filter: selectFilter({ options: selectOptions }),
    headerStyle: (column, colIndex) => {
      return { textAlign: "center", width: "8%" };
    },
    formatter: archiveFormatter,
    align: "center",
  },
];

export default inject("riskStore")(observer(Register));

Answer 1

rpotectedRoute函数在您登录之间返回不同的类型。

1. authStore.loggedIn为true时，它返回React Component，类似于(props) => <jsx/>
2. auth.loggedIn为假时，它返回一个React Element，类似于<jsx/>

因此，在这种情况下，您应该这样做

import React from "react";
import authStore from "../../store/authStore";
import { Redirect } from "react-router-dom";

const protectedRoute = (RouteComponent) => {
  if (authStore.loggedIn) {
    return RouteComponent;
  }
  return () => <Redirect to="/login" />;
};

export default protectedRoute;

如果您是新手，我建议您阅读React components, elements and instances