React使用RTK Query报Object(...) is not a function错误如何解决

核心错误原因 #

你的报错根源是createApi导入路径错误，从@reduxjs/toolkit/dist/query导入的是不带React适配的核心包，不会自动生成对应查询的React钩子，因此你导出的useGetAllPostQuery实际为undefined，调用时就会抛出「不是函数」的类型错误。 #

修复步骤 #

1. 修正RTK Query导入路径 #

更新src/Service/Post.js的代码：

// 从react适配包导入，才会自动生成钩子
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"
    
export const postApi = createApi({
    reducerPath: 'postApi',
    baseQuery: fetchBaseQuery({
        baseUrl: "https://jsonplaceholder.typicode.com/",
    }),
    endpoints: (builder) => ({
        getAllPost: builder.query({
            query: () => ({
                url: 'posts',
                method: 'GET'
            })
        })
    })
})
export const { useGetAllPostQuery } = postApi

2. 注册RTK Query服务到Redux Store #

新增/修改src/store.js，注册api的reducer和中间件：

import { configureStore } from '@reduxjs/toolkit'
import { postApi } from './Service/Post'

export const store = configureStore({
  reducer: {
    // 这里的key必须和你定义的reducerPath值完全一致
    [postApi.reducerPath]: postApi.reducer,
  },
  // 加入RTK Query专用中间件，处理缓存、请求去重等逻辑
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(postApi.middleware),
})

3. 给应用包裹Redux Provider #

修改入口文件（通常是src/index.js）：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { Provider } from 'react-redux'
import { store } from './store'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

4. 完善请求状态处理 #

修改src/App.js，适配请求的不同状态：

import { useGetAllPostQuery } from './Service/Post'

export default function App() {
  const { data, error, isLoading } = useGetAllPostQuery()
  if (isLoading) return <div>加载中...</div>
  if (error) return <div>请求出错，请稍后重试</div>
  return (
    <div>
        <h1>React App</h1>
        <ul>
          {data?.map(post => <li key={post.id}>{post.title}</li>)}
        </ul>
    </div>
  )
}

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