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文档等内容，尽管我不敢相信这是一个不常见的用例，但我找不到真正符合我所做内容的东西。 / p>

我缺少明显的东西吗？

解决方案：（感谢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);

这很好用！ ?

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)

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

1 个答案: