Next.js项目中useContext在嵌套组件内无法生效问题求助

已定位到的问题及修复方案 #

核心问题1：上下文调用层级顺序错误 #

useContext 必须在对应 Provider 的后代组件中调用，你当前pages/fund/index.js的执行逻辑是先调用useContext(FundContext)，再渲染<Fund>组件（FundContext.Provider 的载体），调用时 Provider 还未挂载，自然拿不到上下文值。 #

核心问题2：components/Fund.js存在多处语法错误 #

• 导包错误：把FundContext错命名导入为UserContext，同时未正确导入UserContext就使用了aTest变量
• 导出错误：文件定义的是Fund组件，最后却导出了不存在的Layout对象

核心问题3：全局Layout未实际生效 #

你描述所有页面被<Layout>包裹，但现有_app.js代码中没有渲染Layout组件，全局Layout逻辑实际未运行。 #

修复步骤 #

第一步：修复components/Fund.js语法错误 #

import React, { useContext } from "react";
// 正确导入两个Context
import UserContext from './UserContext';
import FundContext from './FundContext';

const Fund = ({children}) => {
  // 从UserContext中取aTest的值
  const { aTest } = useContext(UserContext);
  return (
    <main>
      <h1>{aTest}</h1>
      <FundContext.Provider value={{ anotherTest: "Just another test" }}>
        {children}
      </FundContext.Provider>
    </main>
  )
}
// 正确导出Fund组件
export default Fund;

第二步：调整上下文调用层级，二选一即可 #

方案A：页面内容抽成子组件放在Fund内部

修改pages/fund/index.js：

import React, { useContext } from "react";
import Fund from '../../components/Fund';
import FundContext from '../../components/FundContext';

// 子组件在Fund内部渲染，属于Provider的后代节点
const FundContent = () => {
  const { anotherTest } = useContext(FundContext);
  return <>{anotherTest}</>;
}

export default function FundPage() {
  return (
    <Fund>
      <FundContent />
    </Fund>
  )
}

方案B：全局给fund路由套Fund层

修改pages/_app.js，统一处理Layout和Fund的嵌套逻辑，所有fund路由下的页面可直接调用FundContext：

import React, { useState } from "react";
import UserContext from '../components/UserContext';
import Fund from '../components/Fund';
import Layout from '../components/Layout';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const isFundRoute = router.pathname.startsWith('/fund');
  
  return (
    <UserContext.Provider value={{ aTest: "This is a test" }}>
      <Layout>
        {isFundRoute ? (
          <Fund>
            <Component {...pageProps} />
          </Fund>
        ) : (
          <Component {...pageProps} />
        )}
      </Layout>
    </UserContext.Provider>
  )
}

export default MyApp

用方案B的话，pages/fund/index.js可以直接简化为：

import React, { useContext } from "react";
import FundContext from '../../components/FundContext';

export default function FundPage() {
  const { anotherTest } = useContext(FundContext);
  return <>{anotherTest}</>
}

内容的提问来源于stack exchange，提问作者Zeb