Redux Connect w/ HOC - TypeError: Cannot set property 'props' of undefined

问题

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! 🙂

回答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)

来源：https://stackoverflow.com/questions/59067643/redux-connect-w-hoc-typeerror-cannot-set-property-props-of-undefined

标签

javascript

reactjs

redux

react-redux

higher-order-components