如何跨不同React Hook共享解构变量实现加载与错误状态集中管理

完全可以通过逻辑聚合多个useQuery返回的状态，实现加载、错误的集中管理，不需要零散判断每个模块的独立状态。

基础实现方案 #

不需要大幅修改原有代码结构，分两种情况适配你当前的编码习惯：

• 如果你习惯保留完整的useQuery实例引用，遍历所有查询实例做状态汇总即可
• 如果你已经按照原有写法把每个查询的loading、error、data做了独立解构，只需要把零散的状态值收集到统一变量中
  • 统一loading判断：只要任意一个模块处于加载状态，就触发全局加载动画
  • 统一错误收集：把所有非空的错误信息做过滤、去重后，触发统一的错误提示，避免重复弹窗

适配原有解构写法的代码示例 #

// 完全保留你原有的解构取值逻辑
const { loading: loadingDogs, error: errorDogs, data: dataDogs } = useQuery(GET_DOGS);
const { loading: loadingCats, error: errorCats, data: dataCats } = useQuery(GET_CATS);

// 聚合生成统一状态
const unifiedLoading = loadingDogs || loadingCats;
const unifiedError = [errorDogs, errorCats]
  .filter(Boolean)
  // 相同报错去重，避免重复弹出提示
  .reduce((list, err) => list.some(item => item.message === err.message) ? list : [...list, err], []);

这个方案不会影响原有业务数据的正常使用，你还是可以直接用dataDogs、dataCats渲染对应模块的内容，只需要把原来零散的状态判断替换成统一的unifiedLoading判断即可。

可复用的封装方案 #

如果多个页面都有类似的多查询状态聚合需求，可以把聚合逻辑抽成通用自定义Hook，减少重复代码：

// 封装统一状态聚合Hook
function useAggregatedQueryStatus(...queryStatus) {
  // 传入所有独立的loading、error值即可
  const loadingList = queryStatus.filter(item => typeof item === 'boolean');
  const errorList = queryStatus.filter(item => item && typeof item === 'object');

  const unifiedLoading = loadingList.some(loading => loading);
  const unifiedError = errorList
    .filter(Boolean)
    .reduce((list, err) => list.some(item => item.message === err.message) ? list : [...list, err], []);
  
  return { unifiedLoading, unifiedError };
}

页面内调用时，直接把各个模块的独立状态传进去即可：

const { loading: loadingDogs, error: errorDogs, data: dataDogs } = useQuery(GET_DOGS);
const { loading: loadingCats, error: errorCats, data: dataCats } = useQuery(GET_CATS);

const { unifiedLoading, unifiedError } = useAggregatedQueryStatus(loadingDogs, errorDogs, loadingCats, errorCats);

实现注意事项 #

• 不要为了统一状态强行把多个独立业务域的查询合并成单个useQuery，这种做法会让单个查询的故障影响整页所有数据的加载容错能力，保留分模块查询的优势
• 如果不同业务的错误需要差异化提示，可以在聚合时给对应错误附加业务标识，兼顾集中管理和业务区分
• 加载状态的触发阈值可以按页面需求调整：如果希望只有首屏首次加载时展示全局动画，后续后台刷新不需要触发加载，可以在聚合loading时额外判断是否是首次加载的状态值，避免后台刷新时遮挡页面内容

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