点击按钮时向React Query传递动态参数的实现方案问询

不用非得把date存到useState再靠useEffect触发请求，React Query有更直接的处理方式，给你两种可行方案：

方案一：用state管理选中日期，让React Query自动触发请求 #

把点击得到的日期存在state里，作为useQuery的查询键（queryKey）和请求函数的参数，同时配置enabled属性，只有当选中日期存在时才发起请求。代码调整后如下：

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';

const [selectedDay, setSelectedDay] = useState<string | null>(null);

const { data } = useQuery(
  ['times', selectedDay], // 将selectedDay加入queryKey，不同日期的请求会单独缓存
  () => getTimes(selectedDay!), // 非空断言没问题，因为enabled确保有值才执行
  {
    enabled: !!selectedDay, // 选中日期存在时才触发请求
  }
);

export const getTimes = async (day: string) => {
  const response = await fetch(`/api/calendar?byDay=true&day=${day}`);
  return await response.json();
};

const handleOnClick = (date: string) => {
  setSelectedDay(date); // 只需更新state，React Query会自动重新请求对应日期的数据
};

这种方式完全不需要额外的useEffect，点击时更新state后，React Query检测到queryKey变化，会自动调用getTimes获取新数据，同时还能为不同日期的数据单独缓存，下次再点同一个日期会直接用缓存，不用重复请求。

方案二：直接调用refetch并传入新参数 #

如果不想用state管理，也可以直接在点击事件里调用refetch，同时传入新的请求逻辑。但要注意，这种方式不会更新queryKey，不同日期的缓存会被覆盖，适合临时场景：

import { useQuery } from '@tanstack/react-query';

const { data, refetch } = useQuery(
  ['times'], // 固定queryKey，不同日期的缓存会互相覆盖
  () => getTimes('默认值'), // 随便填个默认值，enabled为false不会自动执行
  {
    enabled: false, // 禁止自动发起请求
  }
);

export const getTimes = async (day: string) => {
  const response = await fetch(`/api/calendar?byDay=true&day=${day}`);
  return await response.json();
};

const handleOnClick = async (date: string) => {
  // 调用refetch时传入新的请求函数，使用当前点击的date
  const result = await refetch({
    queryFn: () => getTimes(date),
  });
  // 可以从result中获取最新数据
  console.log(result.data);
};

总结 #

优先选方案一，既符合React Query的缓存设计思路，代码也更简洁易维护，完全不需要依赖useEffect来触发请求。

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