如何创建 HOC 以在 React 中包装 useContext 提供程序？

Question

我想使用 HOC（“高阶组件”）在我的应用程序的不同部分重用上下文提供程序，但我的状态没有得到更新。

这是提供程序的包装器。

import React, { FC, useState } from "react";
import AdminContext from "./adminContext";

const AdminContextWrapper: FC = ({ children }) => {
  const [authAdmin, setAuthAdmin] = useState<boolean | null>(null);
  
  const value = { authAdmin, setAuthAdmin };
  return (
    <AdminContext.Provider value={value}>{children}</AdminContext.Provider>
  );
};

export default AdminContextWrapper;

这就是我的实现方式：

import { useContext } from "react";
import AdminContext from "@comp/contexts/adminContext";
import AdminLogin from "@comp/admin/adminLogin";
import Limit from "@comp/admin/limits";
import AdminContextWrapper from "@comp/contexts/adminWrapper";

const Admin = () => {
  const { authAdmin } = useContext(AdminContext);

  const AdminPage = () => {
    return (
      <div>
        <Limit />
      </div>
    );
  };

  return (
    <AdminContextWrapper>
      {authAdmin ? <AdminPage /> : <AdminLogin />}
    </AdminContextWrapper>
  );

最后，这是我的背景：

import { createContext } from "react";
import { AdminContextType } from "@comp/utils/types";

const InitialUserContext: AdminContextType = {
  
  authAdmin: false,
  setAuthAdmin: (authAdmin: boolean | null) => {},
  
};

const AdminContext = createContext<AdminContextType>(InitialUserContext);

export default AdminContext;

我可以在登录页面看到状态变化，但管理页面没有更新。

adminLogin.tsx

//...
 const { setAuthAdmin, authAdmin } = useContext(AdminContext);

 useEffect(() => {
    console.log(authAdmin); // returns true after validating but the admin does not update.
  }, [authAdmin]);
//...

非常感谢任何帮助。谢谢。

Answer 1

除非我误读了东西，在

const Admin = () => {
  const { authAdmin } = useContext(AdminContext);
  // ...
  return (
    <AdminContextWrapper>
      {authAdmin ? <AdminPage /> : <AdminLogin />}
    </AdminContextWrapper>
  );
}

您正在尝试在其提供者 AdminContextWrapper 之外使用上下文 - useContext 会 return undefined 除非您已经嵌套在管理上下文的另一个提供程序中，在这种情况下，内部 AdminContextWrapper 将为内部组件提供不同的管理上下文。

您可能想确保只有一个管理上下文。

（顺便说一句，上面的 // ... 曾经是您原始代码中的嵌套组件。千万不要这样做——嵌套组件的身份在每次更新时都会发生变化，从而导致虚假的 re-renders。）

如何创建 HOC 以在 React 中包装 useContext 提供程序？

How to create HOC to wrap useContext provider in React?

reactjs

higher-order-components

use-context