如何在按钮点击时手动调用Redux-toolkit-query（RTK Query）

你代码的问题主要有两个：

• 将配置选项错误地作为了useGetBusinessAreasQuery的第一个参数（该参数应该是查询所需的参数，无参数时传undefined）
• 使用了RTK Query不存在的manual选项，且启用规则配置错误

正确实现步骤 #

1. 调用查询钩子时，将查询参数（无参数则传undefined）作为第一个参数，配置选项作为第二个参数
2. 使用skip: true禁止自动执行查询
3. 通过返回的refetch方法在按钮点击时触发查询

示例代码 #

import { useGetBusinessAreasQuery } from './your-api-slice';

function YourComponent() {
  // 第一个参数是查询参数，无参数传undefined；第二个参数是配置项
  const { data, refetch, isLoading, isError } = useGetBusinessAreasQuery(
    undefined,
    {
      skip: true, // 核心配置：禁止自动发起请求
      refetchOnWindowFocus: false,
      refetchOnReconnect: false
    }
  );

  // 按钮点击触发查询
  const handleTriggerQuery = () => {
    refetch();
  };

  return (
    <div>
      <button onClick={handleTriggerQuery} disabled={isLoading}>
        {isLoading ? '加载中...' : '获取业务区域数据'}
      </button>

      {/* 渲染数据或错误状态 */}
      {isError && <p>加载失败，请重试</p>}
      {data && (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

补充说明 #

• skip: true是RTK Query中控制是否自动执行查询的标准配置，替代你错误使用的enable: false和manual: true
• refetch方法会忽略skip配置，强制发起一次查询
• 可以利用返回的isLoading、isError等状态优化用户交互

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