react-query invalidateQueries方法 无法触发 isLoading状态更新为true

解决思路:用 isFetching 代替 isLoading

可以使用 isFetching 属性来代替 isLoading 属性来监听查询是否正在获取数据。isFetching 属性是 React Query 提供的另一个属性,用来表示当前查询是否正在获取最新数据。当调用 invalidateQueries 方法时,它会将查询的 isFetching 属性设置为 true,表示当前查询正在获取最新数据。然后,在数据获取完成后,isFetching 属性会被重置为 false。

因此,如果想要监听查询是否正在获取最新数据,可以将 isFetching 属性绑定到组件的状态中,如下所示:

import { useQuery } from 'react-query';
function MyComponent() {
  const { isFetching, data } = useQuery('myQueryKey', fetchMyData);
  // 在这里可以根据 isFetching 状态展示不同的 UI 界面
  return (
    <div>
      {isFetching ? 'Loading...' : data}
    </div>
  );
}

当调用 invalidateQueries 方法时,React Query 会将查询的 isFetching 属性设置为 true,从而更新组件的状态。然后,在数据获取完成后,isFetching 属性会被重置为 false,表示查询已经完成获取最新数据的操作。

tip:需要注意的是,isFetching 属性只能表示当前查询是否正在获取最新数据,它不能表示查询是否正在进行其他操作,例如缓存中获取数据或者使用预取。因此,在某些情况下,可能仍然需要使用 isLoading 属性来监听查询的状态。
例如:enabled为true时,isFetching的状态为false(不符合预期),isLoading的状态为true(符合预期)

参考答案:https://github.com/TanStack/query/issues/2559

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值