同文件使用两个useContext时AppContext返回undefined是什么原因

架构老林

2026-9-2

问题根因

同一个组件内调用多个useContext本身是合法写法，你拿到AppContext返回值为undefined的核心原因只有一个：

SubscribePopup组件没有被包裹在<AppContext.Provider>的子组件树范围内。

你当前Home文件里的<AppContext.Provider>标签内部是空的，没有渲染任何子组件，包括NavBar、SubscribePopup在内的所有业务组件都在Provider作用域之外，此时useContext(AppContext)拿到的是createContext()初始化时的默认值——你初始化时没传默认参数，自然返回undefined。
而SubscribeContext能正常运行，是因为SubscribePopup本身就在SubscribeContext.Provider的子树范围内，符合Context的访问规则。

修复方案

给createContext传入兜底默认值，避免组件意外脱离Provider作用域时解构报错：

export const AppContext = createContext({
  error: false,
  setError: () => {}
});

将所有需要访问AppContext的组件（包括NavBar、Card等，SubscribePopup作为NavBar的子组件会自动被覆盖）全部放到<AppContext.Provider>标签内部，确保上下文作用域能覆盖到消费组件。修复后的Home组件代码如下：

import React, { createContext, useState } from 'react'
import Card from './components//Cards/Card'
import NavBar from './components/NavBar/NavBar'

export const AppContext = createContext({
  error: false,
  setError: () => {}
});

export default function Home() {
    const [error, setError] = useState(false);
    return (
        <div>
            <AppContext.Provider value={{error, setError}}>
                {/* 所有需要访问AppContext的组件都放在Provider内部 */}
                <NavBar />
                <Card />
            </AppContext.Provider>
        </div>
    )
}