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

Question

我正在 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 文档等，但我真的找不到任何与我正在做的相匹配的东西，尽管我不敢相信这是一个不常见的用例.

我是否漏掉了一些明显的东西？

解决方法：（谢谢迪玛的帮助！）

所以最终运行的代码是：

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

这非常有效！

Answer 1

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)

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

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

javascript

reactjs

redux

react-redux

higher-order-components