ReactJS中如何在Context存储用户数据并在其他组件中使用

1. 创建用户Context文件 #

新建一个UserContext.js文件，封装用户数据的获取与状态管理：

import { createContext, useContext, useState, useEffect } from 'react';
import axios from 'axios';

// 创建Context并设置默认值
const UserContext = createContext({
  user: null,
  isLoading: true,
  error: null
});

// 定义Provider组件，负责获取并共享用户数据
export const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isMounted = true;

    // 异步获取用户数据
    const fetchUser = async () => {
      try {
        const res = await axios.get('/api/me');
        if (isMounted && res.data.status === 200) {
          setUser(res.data.user);
          setError(null);
        }
      } catch (err) {
        if (isMounted) {
          setError('获取用户信息失败');
          console.error(err);
        }
      } finally {
        if (isMounted) {
          setIsLoading(false);
        }
      }
    };

    fetchUser();

    // 组件卸载时取消请求关联
    return () => {
      isMounted = false;
    };
  }, []);

  // 组装要共享的状态
  const contextValue = {
    user,
    isLoading,
    error
  };

  return (
    <UserContext.Provider value={contextValue}>
      {children}
    </UserContext.Provider>
  );
};

// 自定义Hook，简化组件获取Context的操作
export const useUser = () => {
  return useContext(UserContext);
};

2. 在应用入口包裹UserProvider #

在App.js或index.js中，用UserProvider包裹整个应用，让所有子组件都能访问用户数据：

import { UserProvider } from './UserContext';
import MainContent from './MainContent';

function App() {
  return (
    <UserProvider>
      <MainContent />
    </UserProvider>
  );
}

export default App;

3. 在任意组件中直接使用用户数据 #

现在无需重复写API请求，直接通过useUser Hook获取数据：

import { useUser } from './UserContext';

function UserProfile() {
  const { user, isLoading, error } = useUser();

  // 处理加载状态
  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 处理请求错误
  if (error) {
    return <div>{error}</div>;
  }

  // 渲染用户信息
  return (
    <div className="profile-card">
      <h2>{user.firstname} {user.lastname}</h2>
      <p>邮箱：{user.email}</p>
      <p>电话：{user.phone}</p>
    </div>
  );
}

export default UserProfile;

补充说明 #

• 该方案仅在应用初始化时请求一次用户数据，所有组件共享同一份状态，避免重复请求
• 如果需要更新用户数据（比如修改个人信息后），可在UserContext中添加updateUser方法，调用API后同步更新state
• 可根据业务需求添加未登录状态处理（比如API返回401时跳转登录页）

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