React应用中如何设置全局可访问变量替换多处引用的用户列表常量？

你当前编写的USERS_LIST是一个无返回值的React函数组件，组件内部的useState状态是组件私有数据，没有对外暴露访问通道，其他组件自然无法获取到接口返回的用户列表。

以下三种方案适配不同的项目场景，可按需选择：

方案1：React Context 全局共享（最适配你的需求） #

无需引入额外依赖，完全可以替代原有全局常量的使用方式，改造成本最低。

步骤1：创建全局用户Context #

新建src/contexts/UsersContext.js文件，代码如下：

import { createContext, useContext, useState, useEffect } from 'react';
import axios from "axios";
import {LINK_ROUTES} from '../const';

// 原有硬编码常量留作兜底，避免接口异常时功能完全不可用
const DEFAULT_USERS_LIST = {
  "u_469": {
    "ID": "469",
    "UID": "HEA009",
    "Name": "XXXX XXXX",
    "Position": "QCO",
    "Shift": "A",
    "u_id": "u_469",
    "img": "u_469.png"
  }
  // 补充原有常量的其余数据
};

const UsersContext = createContext({
  usersList: DEFAULT_USERS_LIST,
  loading: true,
  error: null
});

export function UsersProvider({ children }) {
  const [usersList, setUsersList] = useState(DEFAULT_USERS_LIST);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.post(LINK_ROUTES.links.getUsersDropdown);
        setUsersList(response.data.data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchUsers();
  }, []);

  return (
    <UsersContext.Provider value={{ usersList, loading, error }}>
      {children}
    </UsersContext.Provider>
  );
}

// 封装自定义Hook简化调用
export function useUsers() {
  return useContext(UsersContext);
}

步骤2：根组件注入Context #

修改根组件（通常是App.jsx/main.jsx），用UsersProvider包裹所有业务组件：

import { UsersProvider } from './contexts/UsersContext';

function App() {
  return (
    <UsersProvider>
      {/* 原有应用的所有组件代码 */}
      <div className="App">
        ...
      </div>
    </UsersProvider>
  );
}

export default App;

步骤3：组件中使用 #

所有需要用到用户列表的组件，直接替换原有常量引用即可：

import { useUsers } from '../contexts/UsersContext';

function YourComponent() {
  const { usersList, loading, error } = useUsers();

  if (loading) return <div>加载中</div>;
  if (error) return <div>用户列表加载失败</div>;

  // 原有使用USERS_LIST常量的逻辑完全不用改，直接用usersList即可
  return (
    <div>
      {Object.values(usersList).map(user => (
        <div key={user.u_id}>{user.Name}</div>
      ))}
    </div>
  );
}

方案2：全局状态管理库存储（项目已接入状态库时推荐） #

如果你的项目已经在使用Zustand/Redux/Jotai等状态管理库，可以直接把用户列表存在全局store里，以Zustand为例：

// src/store/usersStore.js
import { create } from 'zustand';
import axios from "axios";
import {LINK_ROUTES} from '../const';

const DEFAULT_USERS_LIST = { /* 原有兜底常量 */ };

const useUsersStore = create((set) => ({
  usersList: DEFAULT_USERS_LIST,
  loading: true,
  error: null,
  fetchUsers: async () => {
    try {
      const res = await axios.post(LINK_ROUTES.links.getUsersDropdown);
      set({ usersList: res.data.data });
    } catch (err) {
      set({ error: err });
    } finally {
      set({ loading: false });
    }
  }
}));

// 初始化时自动拉取用户数据
useUsersStore.getState().fetchUsers();

export default useUsersStore;

组件中使用：

import useUsersStore from '../store/usersStore';

function YourComponent() {
  const { usersList, loading } = useUsersStore();
  // 业务逻辑和原有常量使用方式一致
}

方案3：封装带缓存的自定义Hook（不想用全局状态时可选） #

如果不想引入全局状态，可以封装一个带请求缓存的自定义Hook，避免重复发起接口请求：

// src/hooks/useUsers.js
import { useState, useEffect } from 'react';
import axios from "axios";
import {LINK_ROUTES} from '../const';

const DEFAULT_USERS_LIST = { /* 原有兜底常量 */ };
// 缓存请求结果和请求状态
let cachedUsers = DEFAULT_USERS_LIST;
let isFetching = false;
let fetchPromise = null;

export function useUsers() {
  const [usersList, setUsersList] = useState(cachedUsers);
  const [loading, setLoading] = useState(isFetching);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (cachedUsers !== DEFAULT_USERS_LIST) return;
    if (isFetching) {
      fetchPromise.then(() => {
        setUsersList(cachedUsers);
        setLoading(false);
      });
      return;
    }

    isFetching = true;
    setLoading(true);
    fetchPromise = axios.post(LINK_ROUTES.links.getUsersDropdown)
      .then(response => {
        cachedUsers = response.data.data;
        setUsersList(cachedUsers);
      })
      .catch(err => {
        setError(err);
      })
      .finally(() => {
        isFetching = false;
        setLoading(false);
      });
  }, []);

  return { usersList, loading, error };
}

组件中直接调用useUsers()即可使用，和Context方案用法一致。

• 所有原有引用USERS_LIST常量的地方，替换为对应方案的取值逻辑即可，业务代码无需修改
• 必须添加loading状态处理，避免接口未返回时数据为空导致的渲染报错
• 建议保留原有硬编码常量作为兜底，接口异常时可以保证基础功能可用

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