Redux-Toolkit Query：子组件无法获取已加载查询数据问题

核心问题：缓存键不匹配 #

RTK Query 的查询缓存是基于传入的请求参数作为唯一缓存键存储的。你在组件A里调用getRates时传入的是完整的{ ...params, pollingInterval: 1000 }参数，但子组件B调用useLazyGetRatesQuery时传的是undefined，selector里的select()也没传对应参数——这就导致子组件用undefined作为缓存键找数据，而实际数据存在完整参数对应的缓存键下，自然拿不到数据。

解决方案 #

1. 子组件复用相同请求参数

把组件A调用getRates时用的参数传递给子组件（通过props或Context），子组件用这个参数匹配缓存：

// 子组件B接收props传递的params
const ChildComponentB = ({ ratesParams }) => {
  // 用相同params调用useLazyGetRatesQuery
  const [, { currentData, isLoading, data }] = useLazyGetRatesQuery(ratesParams, {
    selectFromResult: ({ data, error, isLoading }) => ({
      data,
      error,
      isLoading,
    }),
    pollingInterval: 1000,
  });

  // selector也要传入对应params
  const rRates = useSelector(state => 
    pollingRatesApi.endpoints.getRates.select(ratesParams)(state).data
  );
  console.log(rRates);
}

补充说明

useLazyGetRatesQuery的第一个参数是缓存匹配的核心——只有参数完全一致（浅比较），才能匹配到对应的缓存数据。哪怕参数只是少一个属性，都会被当成不同查询，无法找到之前的缓存。

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