React+Zustand数据首次加载不显示问题求助

问题根源分析 #

1. Zustand状态更新的异步性：你在loadData中await fetchUserPermissionss(id)后直接访问test，但Zustand的state更新是异步的，此时组件拿到的还是初始的null值，导致后续test.map逻辑执行失败，页面渲染异常。
2. 缺少精准的加载状态追踪：仅靠!test判断加载状态不可靠——test初始值是null，请求过程中也是null，组件无法区分「正在加载」和「无数据」两种状态，导致Spinner无法正确工作。

解决方案 #

1. 给Zustand Store添加加载/错误状态 #

在Store中新增状态字段，精准追踪请求的加载、成功、失败状态：

// Zustand Store 代码
test: null,
isLoading: false, // 新增：标记请求状态
error: null,      // 新增：标记请求错误

fetchUserPermissionss: async (userId) => {
  try {
    set({ isLoading: true, error: null }); // 请求开始时标记加载中
    const response = await axios.get(`/****/****/${userId}`);
    // response.data 是同步数据，不需要额外await
    set({ test: response.data, isLoading: false }); // 请求成功更新数据
  } catch (error) {
    console.error(error);
    set({ error: error.message, isLoading: false }); // 请求失败标记错误
  }
},

2. 修复组件中的数据处理逻辑 #

不要在await后直接访问test，而是依赖Zustand状态更新触发组件重新渲染，再处理数据：

// 组件代码
const {
  fetchUserPermissionss,
  test,
  isLoading,
  error
} = usePermissionsStore();

useEffect(() => {
  fetchDistricts();
  fetchUserTypes();
  fetchRoles();
  fetchPermissions();
  fetchRolesPermissions();

  if (mode === "edit" && id) {
    const loadData = async () => {
      await getUser(id);
      await fetchUserPermissionss(id);
      // 这里不再直接处理test，等待组件重新渲染后用最新值
    };
    loadData();
  }
}, [id, mode]);

// 监听test变化，数据准备好后再处理逻辑
useEffect(() => {
  if (test && mode === "edit") {
    const districtsData = [...new Set(test.map((item) => item.district_id))];
    // 执行你的后续业务逻辑
  }
}, [test, mode]);

// 正确处理加载、错误、空数据状态
if (isLoading) {
  return <Spinner />;
}

if (error) {
  return <div>加载失败：{error}</div>;
}

if (!test) {
  return <div>暂无权限数据</div>;
}

// 正常渲染页面内容
return (
  // 你的页面结构，直接使用test数据
);

额外优化建议 #

• 把fetchDistricts、fetchUserTypes等其他异步请求也纳入Zustand状态管理，统一维护加载状态，避免页面多请求时状态混乱。
• 如果getUser也是异步请求，同样给它添加加载状态，确保所有依赖数据加载完成后再执行后续逻辑。

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