如何避免在API响应与React Query的useQuery中重复设置回退值？

你遇到的问题核心是React Query在请求pending/error状态下data会是undefined，即使fetchOrgs里给items加了回退，也没法覆盖这两种场景下的data缺失。下面是几种可行的解决办法：

1. 用useQuery的select选项统一处理回退 #

直接在useQuery配置里通过select把返回数据转换成确定类型，后续无需重复设置回退：

const { data: orgs = [] } = useQuery({
  queryKey: ['orgs'],
  queryFn: fetchOrgs,
  select: (data) => data?.items ?? []
});

const { totalItems: totalOrgs, totalFavs } = useTotal({
  fetchFn: fetchOrgs,
  prefix: 'org',
  items: orgs, // 此处类型为Org[]，无需担心undefined
});

select会在请求成功后处理返回值，结合解构时的= []，可以覆盖pending/error状态下的data为undefined的情况。

2. 封装自定义Hook复用逻辑 #

如果多个组件都需要请求组织数据，封装一个自定义Hook把回退逻辑统一起来：

import { useQuery } from '@tanstack/react-query';

function useOrgs() {
  return useQuery({
    queryKey: ['orgs'],
    queryFn: fetchOrgs,
    select: (data) => data?.items ?? []
  });
}

// 在组件中使用
const { data: orgs } = useOrgs(); // orgs 类型直接为Org[]，无需额外处理

const { totalItems: totalOrgs, totalFavs } = useTotal({
  fetchFn: fetchOrgs,
  prefix: 'org',
  items: orgs,
});

这样所有用到组织数据的地方都不用重复写回退逻辑，维护起来更方便。

3. 调整fetchOrgs的错误处理（按需使用） #

如果业务允许请求失败时返回空数组而非抛出错误，可以在fetchOrgs里捕获异常并返回默认结构：

async function fetchOrgs() {
  try {
    const response = await api.get('/orgs');
    return { items: response.data ?? [] };
  } catch (error) {
    // 这里可以根据需求记录错误日志
    return { items: [] };
  }
}

注意：这种方式会让React Query认为请求始终成功，不会进入error状态，需要根据业务场景判断是否适用。

为什么之前的条件判断写法会报错？ #

React要求所有Hook必须在每次渲染中按相同顺序调用，不能在条件语句（比如if (!data) return）之后调用Hook。你之前的代码里，useTotal放在了if (!data) return之后，当data不存在时会提前返回，导致这次渲染没有调用useTotal，和之前渲染的Hook数量不一致，因此触发Rendered more hooks than during the previous render错误。

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