如何点击按钮时为React-Query添加参数并触发API请求

要实现点击按钮时才触发API请求并传递参数，核心是利用React-Query的手动触发机制，结合你已设置的enabled: false（禁用自动请求），具体修改如下：

1. 调整API Hook（simulate-access-right.api.js） #

保持请求函数不变，优化Hook的参数传递逻辑，确保queryKey和请求参数同步：

import { useQuery } from "@tanstack/react-query";
import api from "./api";

export const fetchSimulateAccessRights = ({ productCode, gid }, config) => {
  return api.get(
    `/simulate-access-rights?productCode=${productCode}&gid=${gid}`,
    config
  );
};

export const useFetchSimulateAccessRightsQuery = (variables) => {
  return useQuery({
    queryKey: ["simulate-access-rights", variables],
    queryFn: () => fetchSimulateAccessRights(variables),
    enabled: false, // 禁用页面加载时的自动请求
    cacheTime: 5 * 60 * 1000 // 可选：设置5分钟缓存，避免重复请求
  });
};

2. 修改组件逻辑（demo.js） #

通过refetch方法手动触发请求，点击按钮时获取输入框最新值作为参数传递：

import React, { useRef } from "react";
import { useFetchSimulateAccessRightsQuery } from "./simulate-access-right.api";
import getCustomToolbar from "./CustomToolbar";

const CustomToolbar = getCustomToolbar();

const SimulateAccessRights = () => {
  const groupRef = useRef();
  const productRef = useRef();

  // 初始化不传递参数，获取refetch方法
  const { data, isLoading, refetch } = useFetchSimulateAccessRightsQuery();

  const handleSimulateClick = () => {
    // 获取输入框的最新值
    const productCode = productRef.current?.value.trim();
    const gid = groupRef.current?.value.trim();

    // 可选：校验参数有效性，避免无效请求
    if (!productCode || !gid) {
      alert("请填写产品编码和组ID");
      return;
    }

    // 手动触发API请求，传递最新参数
    refetch({ productCode, gid });
  };

  return (
    <React.Fragment>
      <CustomToolbar
        handleSimulateClick={handleSimulateClick}
        groupRef={groupRef}
        productRef={productRef}
        isLoading={isLoading} // 传递加载状态给工具栏，用于禁用按钮或显示加载动画
      />
      {/* 可选：渲染请求结果 */}
      {isLoading && <div>加载中...</div>}
      {data && (
        <div>
          <h3>模拟权限结果</h3>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    </React.Fragment>
  );
};

export default SimulateAccessRights;

可选方案：基于状态自动触发 #

如果你更倾向于React状态驱动的逻辑，可以通过更新状态来触发请求，无需手动调用refetch：

import React, { useRef, useState } from "react";
import { useFetchSimulateAccessRightsQuery } from "./simulate-access-right.api";
import getCustomToolbar from "./CustomToolbar";

const CustomToolbar = getCustomToolbar();

const SimulateAccessRights = () => {
  const groupRef = useRef();
  const productRef = useRef();
  const [queryParams, setQueryParams] = useState(null);

  // 当queryParams不为空时，自动触发请求
  const { data, isLoading } = useFetchSimulateAccessRightsQuery(queryParams, {
    enabled: !!queryParams,
  });

  const handleSimulateClick = () => {
    const productCode = productRef.current?.value.trim();
    const gid = groupRef.current?.value.trim();

    if (!productCode || !gid) {
      alert("请填写产品编码和组ID");
      return;
    }

    // 更新状态，触发useQuery自动请求
    setQueryParams({ productCode, gid });
  };

  return (
    <React.Fragment>
      <CustomToolbar
        handleSimulateClick={handleSimulateClick}
        groupRef={groupRef}
        productRef={productRef}
        isLoading={isLoading}
      />
      {isLoading && <div>加载中...</div>}
      {data && (
        <div>
          <h3>模拟权限结果</h3>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    </React.Fragment>
  );
};

export default SimulateAccessRights;

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