使用 HOC 包装时，组件不会从 getStaticProps 接收道具

Question

谁能帮我解决下一个SSR和私有路由的问题？我有一个页面使用 getStaticProps 由 SSR 挂载，我想保证只有授权用户才能访问。

我尝试了 getServerSideProps，但我无法将 getServerSideProps 与 getStaticProps 一起使用。

我也尝试了一些 HOCs 实现，但是我的页面在被 auth HOC 组件包装时没有执行 getStaticProps。

编辑： 页面已调用 getStaticProps，但未收到 getStaticProps 的更新数据。仅在道具上未定义。

我的getStaticProps

export const getStaticProps: GetStaticProps = async context => {
  const { slug } = context.params;

  const response = await api.get<ICourse>(`course/${slug}`);
  const course = response.data;
  return {
    props: {
      course,
    },
    revalidate: 600,
  };
};

export default privateRoute(Course);

我的 HOC

function redirectToHome() {
  router.replace('/');
}
function privateRoute(WrappedComponent: any) {
  return class extends Component<AuthProps> {
    state: { isLoading: boolean };

    constructor(props) {
      super(props);
      this.state = {
        isLoading: true,
      };
    }
    async componentDidMount(): Promise<void> {
      if (!cookies.get(AUTH_TOKEN_COOKIE)) {
        redirectToHome();
      }
      try {
        const user = await AuthService.getUser();
        if (user?._id) {
          const permit = await permissionService.get(user._id);
          if (!permit) {
            redirectToHome();
          }
        }
      } catch (e) {
        console.log(e);
        redirectToHome();
      }
    }

    render() {
      const { isLoading } = this.state;
      return (
        <div>{isLoading ? <>Check permission</> : <WrappedComponent />}</div>
      );
    }
  };
}
export default privateRoute;

Answer 1

您需要将道具从 HOC 传递到 <WrappedComponent />。

render() {
    const { isLoading } = this.state;
    return (
        <div>
            {isLoading ? <>Check permission</> : <WrappedComponent {...this.props} />}
        </div>
    );
}

使用 HOC 包装时，组件不会从 getStaticProps 接收道具

Component does not receive props from getStaticProps when wrapped with HOC

reactjs

authentication

next.js

server-side-rendering

higher-order-components