React中useContext在部分组件返回null的问题求助

问题背景 #

在React应用顶层index.js中，我通过fetch从Laravel服务器获取用户信息，存入useState后通过UserContext.Provider传递给子组件。Header组件能正常读取到user数据，但嵌套在react-router-dom的Routes中的组件（比如Post）却始终拿到null。即使把Post移到顶层禁用路由，问题依然存在。

相关代码 #

UserContext.jsx

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

index.js核心代码

const [user, setUser] = useState(null);

// 获取用户信息的Effect
useEffect(() => {
 fetch('/user', {
     method: 'GET',
     headers: {
         'Content-Type': 'application/json'
     },
     credentials: 'include'
 }).then(res => res.json()).then(data => {
     setUser(data);
 }).catch(err => {
     setUser(null)
 });
// 此处缺少依赖数组，会引发无限循环
}

return (
   <UserContext.Provider value={user}>
        <Header/>
        <main>
            <BrowserRouter>
                <Routes>
                    {/* 其他路由省略 */}
                    <Route path="/posts/:id" element={<Post categories={categories} />}></Route>
                </Routes>
            </BrowserRouter>
        </main>
        <Footer/>
    </UserContext.Provider>
);

Post.jsx核心代码

import { useState, useEffect, useContext } from 'react';
import React from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import * as DOMPurify from 'dompurify';
import { Container } from 'react-bootstrap';
import UserContext from '../context/userContext'; // 注意此处导入路径

export default function Post({ categories }) {
    const user = React.useContext(UserContext);

    // 组件逻辑省略
}

问题排查与解决方案 #

1. 修正Context导入路径的大小写问题 #

这是最常见的触发原因：在Linux/macOS等大小写敏感的文件系统中，导入路径的文件名大小写不匹配会导致导入错误的模块。

你的Context文件名为UserContext.jsx，但Post组件中导入的是../context/userContext（首字母小写），这会导致React导入一个不存在的模块，最终useContext返回Context的默认值null。

修复：统一文件名和导入路径的大小写：

// Post.jsx中修改导入语句
import UserContext from '../context/UserContext';

2. 修复useEffect的无限循环问题 #

index.js中的useEffect缺少空依赖数组，会导致组件每次渲染都重新发起fetch请求，反复重置user状态，可能引发组件渲染异常。

修复：添加空依赖数组，确保fetch只执行一次：

useEffect(() => {
 fetch('/user', {
     method: 'GET',
     headers: {
         'Content-Type': 'application/json'
     },
     credentials: 'include'
 }).then(res => res.json()).then(data => {
     setUser(data);
 }).catch(err => {
     setUser(null)
 });
}, []); // 添加空依赖数组

3. 处理异步加载的初始状态 #

fetch是异步操作，组件初始渲染时user的值为null，如果路由组件在user更新前完成渲染，会拿到初始的null。可以添加加载状态避免这种情况：

const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
 fetch('/user', {
     method: 'GET',
     headers: {
         'Content-Type': 'application/json'
     },
     credentials: 'include'
 }).then(res => res.json()).then(data => {
     setUser(data);
 }).catch(err => {
     setUser(null)
 }).finally(() => {
     setLoading(false); // 请求完成后结束加载
 });
}, []);

// 加载状态下不渲染子组件，避免拿到null
if (loading) {
 return <div>加载中...</div>;
}

return (
 <UserContext.Provider value={user}>
   {/* 原有组件内容 */}
 </UserContext.Provider>
);

4. 确保Context实例的唯一性 #

确认整个应用中只在UserContext.jsx中创建一次Context实例，所有需要使用的组件都导入这个文件，不要在其他文件中重复调用createContext，否则会出现多个独立的Context实例，导致数据无法跨组件传递。

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