RTK Query请求始终处于isFetching状态问题排查求助

可能的原因及对应解决办法 #

1. 确认Query Key是否完全区分不同请求 #

不管是React Query还是RTK Query，Query Key是缓存区分的核心。如果两个组件的Query Key没有包含所有差异化参数（lessonId、isActive），会导致缓存混淆，第二个请求的状态被第一个覆盖。

• 解决：确保Query Key包含所有影响查询的参数，甚至可以额外加唯一标识区分组件实例：

  // React Query 示例
  const { data, isFetching, isSuccess } = useFindSubscriptionsQuery({
    queryKey: ['subscriptions', lessonId, isActive, 'expired-component'], // 最后字段区分两个组件
    queryFn: () => fetchSubscriptions(lessonId, isActive)
  });
  
  // RTK Query 示例（定义endpoint时）
  endpoints: (builder) => ({
    findSubscriptions: builder.query({
      query: ({ lessonId, isActive }) => ({
        url: '/subscriptions',
        params: { lessonId, isActive }
      })
    })
  })
  

2. 检查transformResponse的返回值 #

虽然能拿到响应结果，但如果transformResponse返回的格式不符合Query预期（比如返回undefined、结构和初始数据类型不匹配），会导致Query无法将数据标记为成功状态。

• 解决：在transformResponse里确保返回有效数据结构，同时打印日志验证：

  transformResponse: (response) => {
    console.log('转换后的数据:', response);
    // 确保返回非空的数组/对象，匹配组件渲染的预期结构
    return response?.data || [];
  }
  

3. 排查RTK Query缓存策略（若使用RTK Query） #

如果是RTK Query，可能存在缓存键生成异常或缓存拦截的问题：

• 解决：
  • 确保传递给useFindSubscriptionsQuery的参数完全不同；
  • 给第二个组件的请求添加强制刷新配置：

    const { data, isFetching, isSuccess } = useFindSubscriptionsQuery(
      { lessonId, isActive: false },
      { refetchOnMountOrArgChange: true }
    );
    

4. 检查组件渲染的参数传递逻辑 #

第二个组件是点击后渲染，可能存在参数未正确传递的情况：

• 解决：确保点击按钮后，传递给组件的lessonId和isActive状态正确，比如用state维护渲染条件：

  const [showExpired, setShowExpired] = useState(false);
  
  return (
    <>
      <ShowSubscriptions lessonId={lessonId} isActive={true} />
      <button onClick={() => setShowExpired(true)}>显示过期订阅</button>
      {showExpired && <ShowSubscriptions lessonId={lessonId} isActive={false} />}
    </>
  )
  

5. 升级依赖库版本 #

如果使用的是较旧版本的React Query/RTK Query，可能存在同一页面多实例的状态管理bug，尝试升级到最新稳定版。

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