Redux Connect w/ HOC - TypeError：无法设置未定义的属性“props”

我正在 Next.js 中构建快速身份验证高阶组件，但在使用以下代码时遇到了一些问题：

import SignIn from "../components/sign-in";
import { connect } from "react-redux";
import { useRouter } from "next/router";

const AuthenticationCheck = WrappedComponent => {
  const { isAuthenticated, ...rest } = props;
  const router = useRouter();
  const protectedPages = ["/colours", "/components"];
  const pageProtected = protectedPages.includes(router.pathname);

  return !isAuthenticated && pageProtected ? (
    <SignIn />
  ) : (
    <WrappedComponent {...rest} />
  );
};

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

export default connect(mapStateToProps)(AuthenticationCheck);

如果我更改代码以删除 redux 和 connect，它看起来像这样，并且工作完美。

const AuthenticationCheck = WrappedComponent => {
  const { ...rest } = props;
  const router = useRouter();
  const protectedPages = ["/colours", "/components"];
  const pageProtected = protectedPages.includes(router.pathname);

  return pageProtected ? <SignIn /> : <WrappedComponent {...rest} />;
};

export default AuthenticationCheck;

在过去的几个小时里，我一直在阅读每一个 SO、redux 文档等，但我找不到任何与我正在做的事情相匹配的东西，尽管我不敢相信这是一个不常见的用例。

我错过了一些明显的东西吗？

解决方案：（谢谢Dima的帮助！）

所以最终运行的代码是：

import SignIn from "../components/sign-in";
import { connect } from "react-redux";
import { useRouter } from "next/router";
import { compose } from "redux";

const AuthenticationCheck = WrappedComponent => {
  const authenticationCheck = props => {
    const { isAuthenticated, ...rest } = props;
    const router = useRouter();
    const protectedPages = ["/colours", "/components"];
    const pageProtected = protectedPages.includes(router.pathname);

    return !isAuthenticated && pageProtected ? (
      <SignIn />
    ) : (
      <WrappedComponent {...rest} />
    );
  };
  return authenticationCheck;
};

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

export default compose(connect(mapStateToProps), AuthenticationCheck);

这非常有效！ ????

connect期望将 React 组件作为最后一个参数，但您正在发送 HOC。你需要把connect和里面的包装纸compose功能。见下文

import React from 'react'
import {compose} from 'redux'
import {connect} from 'react-redux'
import {doSomething} from './actions'


const wrapComponent = Component => {
  const WrappedComponent = props => {
    return (
      <Component {...props} />
    )
  }
  return WrappedComponent
}

const mapStateToProps = state => {
  return {
    prop: state.prop,
  }
}

export default compose(
  connect(mapStateToProps, {doSomething}),
  wrapComponent
)

和使用它像这样。

import React from 'react'
import withWrapper from 'your/path'

const Component = props => 'Component'

export default withWrapper(Component)