Javascript 将Auth0用户对象存储在nextjs类型脚本的Reaction上下文中

正如 comments 中所说，你需要拨打一次S useUser，并存储数据，然后从你的store 读取.

首先，我们需要包装调用useUserxUserProvider的组件，以便能够使用useContext钩子进行读取.

import { AppProps } from "next/app";
import "../styles/globals.css";
import { MyUserProvider } from "@src/components/common/userContext";
import { UserProvider } from "@auth0/nextjs-auth0/client";


export default function App({ Component, pageProps }: AppProps) {
  return (
    <UserProvider>
      <MyUserProvider>
        <Component {...pageProps} />
      </MyUserProvider>
    </UserProvider>
  );
}

然后，我们可以调用useUser并将其传递给我们的上下文:

import { createContext, useContext } from "react";
import { useUser, UserProfile } from "@auth0/nextjs-auth0/client";

type UserContextType = {
  user: UserProfile | undefined;
  error: Error | undefined;
  isLoading: boolean;
};

const UserContext = createContext<UserContextType | null>(null);

export const MyUserProvider = ({ children }: { children: React.ReactNode }) => {
  const { user, error, isLoading } = useUser();

  return (
    <UserContext.Provider value={{ user, error, isLoading }}>
      {children}
    </UserContext.Provider>
  );
};

export const useUserContext = () => {
  const context = useContext(UserContext);

  if (context === null /* the initial value */) {
    throw new Error("You probably forgot to wrap your app in <MyUserProvider>")
  }

  return context;
}