React Query点击触发请求后首次返回undefined的原因及处理方案

为什么会先返回undefined？ #

• response是从useQuery解构出的状态变量，本质属于React组件状态，只有组件重新渲染时才会更新它的值。
• refetch()是异步函数，await refetch()仅会等待网络请求完成，但请求结束后，React Query会先更新自身内部状态，再触发组件重新渲染——只有这一步完成后，response才会拿到新值。
• 而你在onSubmit里执行console.log(response)时，当前函数处于旧的渲染闭包中，捕获的是组件未重新渲染前的response值（也就是初始的undefined），所以会打印undefined。
• 组件外部的console.log(response)会在组件重新渲染后执行，这时候response已经更新，自然能看到正确的响应数据。

正确的处理方式 #

方法1：直接使用refetch的返回值 #

refetch()执行完成后会返回包含请求结果的对象，你可以直接从这个返回值里拿到最新数据，无需等待组件重新渲染：

const onSubmit = async () => {
  const { data: fetchedData } = await refetch();
  console.log(fetchedData); // 这里能直接拿到最新响应
  anotherFunctionThatWillUseResponse(fetchedData);
};

这是最直接高效的方式，适合需要在点击事件里立即使用数据的场景。

方法2：用useEffect监听response变化 #

如果需要在数据更新后自动执行后续逻辑，可以通过useEffect监听response的变化，当它有值时再执行操作：

import { useEffect } from 'react';

// ... 其他代码

useEffect(() => {
  if (response) {
    console.log(response);
    anotherFunctionThatWillUseResponse(response);
  }
}, [response]);

const onSubmit = async () => {
  await refetch();
};

方法3：结合isSuccess状态判断 #

React Query提供了isSuccess状态，用来标识请求是否成功完成，可以结合它来触发后续逻辑：

import { useEffect } from 'react';

const { data: response, refetch, isSuccess } = useQuery({
  queryKey: ['get-response'],
  queryFn: async () => {
    const res = await Axios.get('URL');
    return res.data;
  },
  enabled: false,
});

useEffect(() => {
  if (isSuccess) {
    anotherFunctionThatWillUseResponse(response);
  }
}, [isSuccess, response]);

const onSubmit = async () => {
  await refetch();
};

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