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

Question

I'm building a quick authentication higher order component in Next.js and am getting some problems with the following code:

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);

If I change the code to remove redux & connect, it looks like this, and works perfectly.

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;

I've been reading every SO, redux documentation etc for the last couple of hours, and I can't really find anything that matches what I'm doing, although I can't believe it's an uncommon use case.

Am I missing something obvious?

Solution: (Thankyou Dima for your help!)

So the final code that ended up working is:

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);

This works perfectly! 🙂

Answer 1

connect expects to get React component as a last argument, but you are sending HOC instead. You need to put connect and wrapper inside compose function. See below

 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 ) 

And the useit like this.

 import React from 'react' import withWrapper from 'your/path' const Component = props => 'Component' export default withWrapper(Component)