使用RTK Query实现下拉刷新时界面不重新渲染的问题求助

你的问题出在两个核心点：一是RTK Query默认复用相同参数的缓存结果，导致调用getListing('1')时不会触发新请求或更新组件状态；二是手动维护的isRefreshing未与请求状态联动，且未在请求完成后重置。

方案1：强制刷新缓存+手动控制刷新状态 #

修改fetchList函数，调用getListing时传入forceRefetch: true强制绕过缓存，并在请求完成后重置刷新状态：

const [isRefreshing, setIsRefreshing] = useState(false)
const [
  getListing,
  { data, isLoading, isError, error },
] = useLazyListingQuery()

useEffect(() => {
  getListing('1')
}, [])

const fetchList = async () => {
  setIsRefreshing(true)
  // 强制触发新请求，忽略缓存
  await getListing('1', { forceRefetch: true })
  setIsRefreshing(false)
}

方案2：复用RTK Query的请求状态（更简洁） #

移除手动维护的isRefreshing，直接用RTK Query返回的isLoading控制FlatList的刷新状态，同时保留forceRefetch参数：

const [
  getListing,
  { data, isLoading, isError, error },
] = useLazyListingQuery()

useEffect(() => {
  getListing('1')
}, [])

const fetchList = () => {
  getListing('1', { forceRefetch: true })
}

对应的FlatList修改refreshing属性：

<FlatList
  data={data}
  showsVerticalScrollIndicator={false}
  onStartShouldSetResponder={() => true}
  renderItem={renderItem}
  // 建议替换为数据项的唯一标识（如item.id），避免更新后渲染异常
  keyExtractor={(item) => item.id}
  removeClippedSubviews
  maxToRenderPerBatch={5}
  windowSize={8}
  ItemSeparatorComponent={renderSeparator}
  ListHeaderComponent={renderSeparator}
  ListFooterComponent={renderSeparator}
  onRefresh={fetchList}
  refreshing={isLoading} // 直接使用RTK Query的请求状态
/>

额外提示 #

• 不要用index作为keyExtractor的值，数据顺序或内容更新时会引发FlatList渲染异常，优先使用数据自带的唯一ID。
• 如果需要更精细化的缓存管理，可在RTK Query的API切片中配置providesTags和invalidatesTags，但下拉刷新场景下forceRefetch已能解决问题。

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