为什么React子组件中获取的Context值为undefined？

问题根源及对应解决方法 #

1. 路径大小写不一致导致重复创建Context实例（最常见原因）

如果你的上下文文件实际命名为UserContext.js，但你在不同文件导入时混用了./userContext、./UserContext两种大小写不同的路径：Windows、macOS系统本地开发时路径默认不区分大小写，但打包工具会将大小写不同的路径识别为两个独立模块，相当于你创建了两个互不关联的UserContext实例。你在外层实例中更新了user状态，内层另一个实例的消费者自然拿不到更新后的值。
解决方法：全局统一所有文件中导入context相关接口的路径写法，和实际文件名完全保持一致。

2. 异步更新的时序问题

如果你是在异步逻辑（比如登录接口请求、读取localStorage、useEffect异步回调）中调用setUser更新context值，首次渲染时所有组件拿到的都是你设置的初始值undefined，你在Main组件中看到的user打印是状态更新后的第二次渲染输出，而RequireAuth中你看到的undefined是首次渲染的旧值。
解决方法：可以在RequireAuth中添加监听逻辑确认更新：

import { useEffect } from 'react'

const RequireAuth = ({ children }) => {
    const [ user, setUser ] = useAuth();
    // 监听user变化，就能拿到更新后的值
    useEffect(() => {
      console.log('user更新后的值：', user)
    }, [user])
    
    // 业务逻辑补充loading状态处理初始无值的情况即可
    if (user === undefined) return <div>加载中...</div>
    return children;
}

3. 重复嵌套UserProvider导致值被覆盖

如果你在某个子组件（比如你代码里的Navbar、Title组件）内部额外嵌套了一层<UserProvider>，内层Provider会覆盖外层Provider的值，而内层Provider的初始值为undefined，就会导致后续的Route内组件拿不到外层更新后的值。
解决方法：全局仅保留最外层包裹整个应用的一个UserProvider即可，不要在子组件中重复声明Provider。

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