RTK useQuery数据映射正常但始终加载，无法渲染列表

从最容易忽略的细节开始逐一排查：

1. 确认状态判断逻辑是否正确 #

很多问题出在对useQuery返回状态的误解上：

• 别把isFetching和isLoading搞混：isLoading仅在首次请求且无缓存数据时为true，isFetching则是任何请求进行中都会触发。如果组件频繁重渲染触发请求，可能误把isFetching当成isLoading，导致一直显示加载状态。
• 必须处理error分支：哪怕数据获取成功，若transformResponse过程中抛出异常，error会被赋值，此时isLoading会变为false，但组件若未处理错误，会看起来仍处于加载状态。

正确的状态处理示例：

const { data, isLoading, error } = useGetdiseasesQuery();

if (isLoading) return <ActivityIndicator />;
if (error) return <Text>加载出错：{error.message}</Text>;

// 渲染列表
return <FlatList data={data} renderItem={({item}) => <Text>{item.name}</Text>} />;

2. 再次验证transformResponse的返回值 #

即使你认为转换正常，也需要确认：

• 确保mapGetDiseasesResponse确实返回了非undefined的有效数据，可以在函数内加console.log输出转换结果，或者在RTK DevTools的Queries标签中查看最终返回的data字段。
• 检查转换函数是否正确解析了API返回结构，比如API返回{ data: [...] }时，有没有先取出data再做映射。

transformResponse配置示例：

// 在API endpoint中
transformResponse: (response) => {
  const transformedData = mapGetDiseasesResponse(response);
  console.log("转换后数据：", transformedData); // 确认输出有效
  return transformedData;
},

3. 检查Query Endpoint的配置 #

• 若使用queryFn自定义请求逻辑，必须返回{ data: ... }格式的对象，不能直接返回数据：
  错误示例：

// 错误：直接返回数据，RTK Query无法识别
queryFn: async () => {
  const res = await fetch("/diseases");
  const rawData = await res.json();
  return mapGetDiseasesResponse(rawData);
}

正确示例：

queryFn: async () => {
  const res = await fetch("/diseases");
  const rawData = await res.json();
  return { data: mapGetDiseasesResponse(rawData) }; // 必须包裹在data字段中
}

• 若使用query字段结合fetchBaseQuery，确认baseQuery的baseUrl、headers等配置正确，没有导致请求异常。

4. 排查缓存与重渲染问题 #

• 检查是否设置了不合理的staleTime或cacheTime，比如staleTime设为Infinity但缓存中无数据，可能导致一直处于加载状态。
• 打开RTK DevTools查看Queries下的useGetdiseasesQuery条目，看status字段是loading还是success：如果是success但组件没拿到数据，说明组件的状态判断或数据使用逻辑有误。

5. React Native环境特定排查 #

• 确认网络请求未被拦截（比如调试代理、VPN导致的异常），再次验证API响应状态码为200。
• 检查组件是否被正确包裹在Redux的Provider中，且store已调用setupListeners(store.dispatch)（用于支持refetch等功能）。

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