如何实现RTK Query固定次数轮询？含deepCheck参数控制

问题根源 #

你之前的代码里用了普通变量pollingCount，但组件每次重渲染时这个变量都会被重新初始化为0，导致计数逻辑完全失效。另外skip和deepCheck的判断逻辑也因为变量重置无法正确触发。

正确实现思路 #

1. 用useState保存轮询计数，确保组件重渲染时状态不会丢失
2. 每次请求完成后更新计数，达到设定次数后停止轮询
3. 根据当前计数动态切换deepCheck参数（最后一次请求设为true）
4. 动态控制pollingInterval，达到次数后设为0停止轮询

修改后的组件代码 #

import { useState } from 'react';
import { useDeepCheckQuery } from './service';

export function TransactionDetail(props: Props) {
  // 配置最大轮询次数
  const MAX_POLLS = 3;
  // 用state保存当前轮询次数，初始为0
  const [currentPollCount, setCurrentPollCount] = useState(0);

  const { data } = useDeepCheckQuery(
    {
      paymentId: props.paymentId,
      // 最后一次轮询时设为true（currentPollCount从0开始，第3次对应值为2）
      deepCheck: currentPollCount === MAX_POLLS - 1
    },
    {
      // 当交易状态不符合或已达到最大轮询次数时跳过请求
      skip: !['PMT_IN_PRGS', 'PAYMENT_STARTED'].includes(props.transaction.status) || currentPollCount >= MAX_POLLS,
      // 未达到次数时保持轮询间隔，达到后设为0停止
      pollingInterval: currentPollCount < MAX_POLLS ? 3000 : 0,
      // 请求完成后更新轮询计数
      onSuccess: () => {
        setCurrentPollCount(prev => prev + 1);
      }
    }
  );

  // 其他组件逻辑...
}

补充说明 #

• onSuccess回调会在每次请求成功完成后触发，确保计数准确递增
• 当currentPollCount达到MAX_POLLS时，pollingInterval设为0，RTK Query会自动停止轮询
• deepCheck的判断逻辑是：当当前是最后一次轮询（currentPollCount === MAX_POLLS -1）时设为true，其余为false，完全符合你的需求
• 如果需要处理请求失败的情况，可以在onError回调里添加计数逻辑（比如失败后是否继续轮询）

内容的提问来源于stack exchange，提问作者Dennis A. Boanini