调用useGetCryptoNewsQuery时出现Object(...) is not a function错误如何解决

错误根因 #

报错的核心原因是cryptoNewsApi.js中createApi、fetchBaseQuery的导入路径错误，你当前导入的是RTK Query的无框架核心版本，不会自动生成React专属的查询Hooks，因此你导出的useGetCryptoNewsQuery并非可执行函数，调用时直接触发Object(...) is not a function报错。

修复步骤 #

• 第一步：修改cryptoNewsApi.js导入语句
  将原有导入代码：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/dist/query'

替换为React版本的RTK Query导入：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

• 第二步：补全Store中间件配置（推荐）
  你当前的Store未注册RTK Query专用中间件，会导致后续缓存、自动重查、请求状态管理等功能异常，修改store.js代码如下：

import { configureStore } from '@reduxjs/toolkit'
import { cryptoApi } from '../services/cryptoApi'
import { cryptoNewsApi } from '../services/cryptoNewsApi'

export default configureStore({
  reducer: {
    [cryptoApi.reducerPath]: cryptoApi.reducer,
    [cryptoNewsApi.reducerPath]: cryptoNewsApi.reducer,
  },
  // 新增中间件注册
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(cryptoApi.middleware, cryptoNewsApi.middleware),
})

• 第三步：可选异步状态兜底
  接口请求为异步逻辑，初始返回的cryptoNews为undefined，建议后续使用时加加载状态判断，避免空值报错：

const { data: cryptoNews, isLoading } = useGetCryptoNewsQuery({newsCategory: 'Cryptocurrency', count: simplified ? 6 : 12})
// 加载状态占位
if (isLoading) return <div>新闻加载中...</div>
console.log(cryptoNews)

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