useContext 不适用于嵌套组件

Question

我正在尝试重构应用程序以使用 useContext，但遇到了障碍，无法弄清楚发生了什么。

使用最新版本的一切，运行 Next.js。

事物的结构方式是每个页面都包裹在<Layout> 中，一些 页面也包裹在<Fund> 中，嵌套在<Layout> 下。

我在_app.js 中设置了全局上下文，并传递给Layout 进行渲染。这很好用，我在pages/_app.js 中定义的aTest 上下文变量在Layout 上呈现并显示在所有页面上。

然后，我在components/Fund.js 中设置了特定于基金的上下文，并在pages/fund/index.js（以及随后的其他页面）上加载。

这不起作用。我在 /components/Fund.js 中定义的 anotherTest 上下文变量 not 显示在 /pages/fund/index.js 中，即使那里的 return 语句包装在 <Fund> 组件中（我假设应该保留并传递上下文）。

我想我可能把我的孩子/父母的订单弄混了，因为非工作场景但大脑被炸了。有什么建议吗？

剥离回来，基本代码是：

/components/
   - UserContext.js
   - FundContext.js
   - Layout.js
   - Fund.js

/pages/
   - _app.js
   - index.js
   - /fund/
      - index.js

/components/*Context.js 两个文件中声明的名称是同一个栏：

import { createContext } from 'react';
const FundContext = createContext();
export default FundContext;

和

import { createContext } from 'react';
const UserContext = createContext();
export default UserContext;

在/pages/_app.js我正在做：

import React, { useState } from "react";
import UserContext from '../components/UserContext';
...

function MyApp({ Component, pageProps }) {
   ...
   return (
      <UserContext.Provider value={{
         aTest: "This is a test"
    }}>
      <Component {...pageProps} />
    </UserContext.Provider>
   )
}

export default MyApp

在/components/Layout.js我正在做：

import React, { useState, useContext } from "react";
import UserContext from './UserContext';
const Layout = ({children}) => {    

   let {aTest} = useContext(UserContext);

   return (
      <main>
         <h1>{aTest}</h1>
         {children}
      </main>
    )
}

export default Layout

在/components/Fund.js我正在做：

import React, { useState, useContext } from "react";
import UserContext from './FundContext';
const Fund = ({children}) => {    

   return (
      <main>
         <h1>{aTest}</h1>
            <FundContext.Provider value={{ anotherTest: "Just another test" }}>
            {children}
         </FundContext.Provider>
      </main>
    )
}

export default Layout

在/pages/fund/index.js我正在做：

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

export default function App () { 

   let {anotherTest} = useContext(FundContext);
   
   return (
      <Fund>
         {anotherTest}
      </Fund>
   )
}

Answer 1

您的 useContext 挂钩在 /pages/fund/index.js 的全局范围内调用。将钩子移到组件的范围内应该可以解决问题。

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

export default function App () {
   let {anotherTest} = useContext(FundContext);
 
   return (
      <Fund>
         {anotherTest}
      </Fund>
   )

另外，我在提供的代码中没有看到FundContext.Provider，这意味着对useContext(FundContext) 的调用将无法按预期工作。如果它不存在，请确保将 FundContext 的消费者用它包装起来。

编辑（OP 更新了问题）：

useContext(FundContext) 在组件树中的FundContext.Provider 上方使用。

  |_App (useContext(FundContext))
     |_Fund
         |_FundContext.Provider
                    |_{anotherTest}

考虑将FundContext.Provider移到App组件上方，或者将类似于以下的组件作为子组件传递给Fund：

const AnotherTest = () => {
  let {anotherTest} = useContext(FundContext);

  return (
      <>
         {anotherTest}
      </>
   )
}

/pages/fund/index.js:

import React, { useState, useContext } from "react";
import FundContext from '../../components/FundContext';
...
export default function App () {
   return (
      <Fund>
         <AnotherTest />
      </Fund>
   )
}