React 查询在单击时调用 api 两次

Question

我在点击

onClick

有条件调用 API 时遇到问题。 我希望当用户选择所有字段然后单击提交按钮时，API 将仅被调用一次，但我不明白为什么此代码调用 API 两次：1 次

params: {}

1 次带有数据的参数。

const [filter, setFilter] = useState(null);
const [typeReport, setTypeReport] = useState("");
const { data: reportBusiness, isFetching } = useGetReportBusiness(
  {
    ...filter,
  },
  typeReport
);
const {
  page,
  pageSize,
  handleChangePage,
  handleChangePageSize,
  clientData,
  clientTotal,
} = usePagination(reportBusiness);

const handleSubmit = (values) => {
  const from = moment(values.dateRange[0]).toISOString();
  const to = moment(values.dateRange[1]).toISOString();
  setTypeReport(values.typeReport);

  setFilter({
    from,
    to,
  });
  handleChangePage(1);
};

功能查询

export const useGetReportBusiness = (params, typeReport) => {
  return useQuery({
    queryKey: [QUERY_KEYS.REPORT_BUSINESS, params, typeReport],
    queryFn: async () => {
      console.log("11");
      let res;
      if (typeReport === BUSINESS_CSKH_VALUE) {
        res = await ReportBusinessApi.getReportBusinessCSKH(params);
      } else {
        res = await ReportBusinessApi.getReportBusinessBCP(params);
      }

      return res.data?.data;
    },
  });
};

版本

"react": "^18.2.0",
"@tanstack/react-query": "^5.0.0-alpha.71",

Answer 1

第一次调用是在组件加载时，在初始渲染时

filter

为 null，因此

{...filter}

将计算为

{}

第二次调用是当用户单击按钮时，

filter

和

typeReport

更新，因此过滤器的新状态为

{from:"..", to: ".."}

这将触发重新渲染，因为状态发生了变化，这将执行另一个 api 调用（这是第二次 api 调用），但这次参数已填充

看来您不想进行第一个 api 调用，而只想进行第二个，您可以通过使用 依赖查询

来做到这一点

依赖（或串行）查询依赖于之前的查询来完成 他们可以执行。要实现这一点，就像使用启用的一样简单 告诉查询何时准备好运行的选项：

这基本上使得查询基于条件运行，即仅当

enabled

为

true

时才会运行查询，在这种情况下，您可以使用

filter

not null 作为条件

export const useGetReportBusiness = (params, typeReport, enabed=true) => {
  return useQuery({
    enabled,
    queryKey: [QUERY_KEYS.REPORT_BUSINESS, params, typeReport],
    queryFn: async () => {
      console.log("11");
      let res;
      if (typeReport === BUSINESS_CSKH_VALUE) {
        res = await ReportBusinessApi.getReportBusinessCSKH(params);
      } else {
        res = await ReportBusinessApi.getReportBusinessBCP(params);
      }

      return res.data?.data;
    },
  });
};

并这样称呼它

  const { data: reportBusiness, isFetching } = useGetReportBusiness(
    enabled: filter !== null,
    {
      ...filter,
    },
    typeReport
  );

否则，您可以引入一个新状态

enabled

，默认值为

false

，并在单击按钮时将其更新为

true