Next.js 上下文提供程序用页面特定布局组件包装 App 组件，提供未定义的数据

Posted 2023-02-22

【中文标题】Next.js 上下文提供程序用页面特定布局组件包装 App 组件，提供未定义的数据

【英文标题】：Next.js context provider wrapping App component with page specific layout component giving undefined data

【发布时间】：2021-11-03 18:09:02

【问题描述】：

我有一个身份验证上下文组件，我在其中包装了我的主要应用程序组件，但同时我也在尝试按照 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

【参考方案1】：

由于您当前的结构 ProjectLayout 没有被 AuthContext 包裹，这意味着您将无法访问其上下文。

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

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

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

【讨论】：

我有同样的问题，但在'next/swr'中使用 。我尝试了您的方法，但 Layout 组件仍然没有收到 fetcher。这里有一些有用的链接：nextjs.org/docs/basic-features/layouts#data-fetching 和 swr.vercel.app/docs/global-configuration 你有什么想法吗？

SWRConfig 是否正确包装了布局组件？如果不查看您的代码，很难判断出什么问题。您可能希望将您的问题作为新问题发布。

***.com/questions/69681236/…

太棒了，我在将 Chakra UI 的 ChakraProvider 和 ColorModeProvider 以及 Next Auth 的 NextAuthProvider 添加到 _app.tsx 文件时遇到了类似的问题。现在使用这种方法一切正常。非常感谢@juliomalves！