处理这个问题的唯一方法是将handleOnClick中的date存储到useState变量中,然后在useEffect中重新获取它吗?有什么方法可以只调用handleOnClick中的Reaction Query吗?

const { data, refetch } = useQuery(
  [day],
  () => getTimes(day),  // i cannot instantiate day here as it needs to be passed in by handleOnClick parameter
  {
    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) => {
  // date param is getting returned here by a 3rd party component
  
  const times = await getTimes(date);  // what i normally would do
  // refetch;                          // what i would like to do but can't
}

推荐答案

根据前docs名:

永久禁用查询会放弃TanStack Query必须提供的许多重要特性(如后台重新获取),而且这也不是惯用的方式.它将您从声明性方法(当您的查询应该运行时定义依赖项)带到命令性模式(每当我单击此处时获取).也不可能将参数传递给REFETCH.通常,您所需要的只是延迟初始获取的懒惰查询.

您可以定义所选日期的状态并将其设置在handleOnClick函数上,然后将该状态包括在queryKey数组中,以便在该值发生变化时触发查询.此外,您还可以根据该州的值设置enabled选项:

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

const { data } = useQuery({
  queryKey: ['dates', selectedDay],
  queryFn: () => getTimes(selectedDay),
  enabled: Boolean(selectedDay)
})

然后在handleOnClick函数上:

const handleOnClick = (date: string) => {
  setSelectedDay(date)
}

Reactjs相关问答推荐

无法覆盖MUI工具栏上的左右填充,除非使用!重要

在迁移到Redux—Toolkit 2.0和Redux5.0之后,我在extraReducer和Slice方面有点挣扎,

URL参数和React路由中的点

Formik验证不适用于物料UI自动完成

是否在Extra Reducer完成作业(job)时触发createListenerMiddleware?

有没有一种方法可以在没有强烈动画的情况下有条件地渲染组件?

Reaction上下文值无法传递给其他组件

React 为什么标签导致 onClick 事件运行 2 次?

React - 如何重定向页面以显示数据修改?

react - 警告:列表中的每个子元素都应该有一个独特的 keys props ,即使我已经设置了 keys

在复选框中react 检索选中的值

单击按钮或文本从一个组件移动到另一个组件

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

如何通过 Material ui select 使下拉菜单下拉

加密 Django Rest Framework API 响应 + 解密响应应用程序中的响应

在react 钩子中将数组添加到数组状态给出一个数字

ReactJS:按钮启用禁用更改 colored颜色

哪个 PrivateRouter 实现更好:高阶组件还是替换?

如何判断对话框组件是否位于对话框之上?

Map 函数只返回 Array 中的图像