React18.2中react-query请求成功但data返回undefined

React 18 引入并发渲染机制后，要求所有外部状态库必须基于useSyncExternalStoreAPI实现状态同步，否则会出现状态更新不触发组件重渲染、读取到初始undefined值的问题。你使用的react-query是v3及更早的旧版本（包名为react-query），低于3.39.0的版本完全没有做React18适配，即便是高版本v3也存在兼容边缘case，目前react-query官方已将包名改为@tanstack/react-query，只有v4及以上版本对React18做了完整适配。
其他可能的触发场景：

• CRA创建的项目默认开启<React.StrictMode>，旧版react-query在严格模式双调用机制下会出现状态错乱
• queryFn没有正确返回接口响应体，导致缓存值为空

方案1：升级到官方稳定适配版本（推荐） #

1. 卸载旧包，安装适配React18的新版：

npm uninstall react-query
npm install @tanstack/react-query

2. 替换全局导入路径
   所有文件中原来从react-query导入的API，统一改为从@tanstack/react-query导入。
   index.js核心代码修改如下：

// 替换旧的导入语句
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// 增加基础默认配置，避免非预期请求
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      refetchOnWindowFocus: false,
      staleTime: 5 * 60 * 1000,
    },
  },
});

// 其余Provider嵌套逻辑无需修改

App.js导入同步修改：

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

function App() {
  // v4版本推荐使用对象形式传参，queryKey统一用数组格式，避免缓存匹配异常
  const { isLoading, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: async () => {
      const res = await axios.get('https://api.github.com/repos/tannerlinsley/react-query');
      return res.data;
    }
  });

  // 其余渲染逻辑无需修改
  if (isLoading) return <>Loading</>
  if (error) return <>Error</>
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

方案2：不升级大版本的临时修复 #

如果暂时不想升级到v4，将react-query升级到v3分支最终适配React18的版本：

npm install react-query@3.39.3

同时移除root.render中的<React.StrictMode>包裹，避免严格模式双调用导致的状态异常。

校验步骤 #

如果按上述步骤修改后仍有异常，在queryFn中打印完整axios响应对象，确认接口返回的res.data是否存在预期值，排除拦截器、响应结构异常的问题。

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