Next.js上下文提供程序包装带有页面特定布局组件的App组件，该组件提供未定义的数据 [英] Next.js context provider wrapping App component with page specific layout component giving undefined data

问题描述

我有一个auth上下文组件，我在其中包装了我的主应用程序组件，但同时我也尝试按照Next.js文档在这里进行页面特定的布局组件：https://nextjs.org/docs/basic-features/layouts#per-page-layouts

我这样做是否正确，因为我似乎无法从上下文提供程序获取数据。

/context/AuthContext.js

const UserContext = createContext({});

export default function AuthContext({children}) {
  // .. code
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

export const useUser = () => useContext(UserContext);

/_app.js

function MyApp({ Component, pageProps }) {    

  const getLayout = Component.getLayout || ((page) => page);

  return getLayout(
    <div>
      <AuthContext>
        <Component {...pageProps} />
      </AuthContext>
    </div>
  );
}

export default MyApp;

/components/Project/List.js

import { useUser } from "../../context/AuthContext";

const ProjectList = () => {
  const { user } = useUser();
  console.log("get user data", user);

  return (
    <>
      test
    </>
  );
};

export default ProjectList;

我试图通过控制台登录该用户，但它给我提供了未定义的信息。我想是因为它被包装成布局组件的方式吧？我可能做错了。但是我确实在AuthContext中为用户登录了控制台，那里的信息是正确的。

/pages/projects/index.js

const Projects = () => {
  // code goes here
  return (
    <div>
      code goes here
    </div> 
  )
}

export default Projects;

Projects.getLayout = function getLayout(page) {
  return <ProjectLayout>{page}</ProjectLayout>;
};

当我删除Projects.getLayout挡路代码时，数据会返回，但当我添加此代码时，数据会消失。

/components/Project/Layout.js

const ProjectLayout = ({children}) => {
  return (
    <>
      <ProjectList />
      {children}
    </>
  }

export default ProjectLayout

您当前结构ProjectLayout的推荐答案

没有被AuthContext包装，这意味着您将无法访问其上下文。

您可以修改_app的结构并移动getLayout调用，以便上下文正确包装它。

function MyApp({ Component, pageProps }) {    
    const getLayout = Component.getLayout || ((page) => page);

    return (
        <AuthContext>
            {getLayout(<Component {...pageProps} />)}
        </AuthContext>
    );
}

这篇关于Next.js上下文提供程序包装带有页面特定布局组件的App组件，该组件提供未定义的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！