使用Redux Toolkit Query调用API时出现get未定义错误求助

问题说明 #

尝试用Redux Toolkit的RTK Query编写简单API切片时，遇到Uncaught ReferenceError: get is not defined错误，不确定是工具bug还是代码问题。

相关代码 #

API切片代码 #

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

export const jokesApi = createApi({
    reducerPath: 'jokesApi',
    baseQuery: fetchBaseQuery({
      baseUrl: 'https://official-joke-api.appspot.com/jokes/',
    }),
    endpoints: (builder) => ({
      getJokeByType: builder.query({
        query: (type) => `${type}/random`,
      }),
    }),
  });
  
  export const { useGetJokeByTypeQuery } = jokesApi;

App.js代码 #

import {useGetJokeByTypeQuery } from './ApiSlice'

const App = () => {

  const {
    data,
    isLoading,
    isSuccess,
    isError,
    error
} = useGetJokeByTypeQuery('programming')

  return (
    <div>
      <button onClick={get}>click here</button>
    </div>
  )
}

export default App

错误信息 #

Uncaught ReferenceError: get is not defined
    at App (App.js:15:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at recoverFromConcurrentError (react-dom.development.js:25850:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:25750:1)

解决方案 #

这个错误不是RTK Query的bug，是代码逻辑问题：

1. 错误原因：App.js中按钮的onClick={get}里的get函数从未定义过。你使用的useGetJokeByTypeQuery是RTK Query的自动查询Hook，组件挂载时就会自动发起请求，不会返回手动触发的get函数。

2. 解决方法：如果需要通过点击按钮手动触发请求，必须改用懒查询（lazyQuery），它会返回一个触发函数用于手动调用。

修改后的代码 #

API切片（改为lazyQuery）

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

export const jokesApi = createApi({
    reducerPath: 'jokesApi',
    baseQuery: fetchBaseQuery({
      baseUrl: 'https://official-joke-api.appspot.com/jokes/',
    }),
    endpoints: (builder) => ({
      getJokeByType: builder.lazyQuery({ // 将builder.query改为builder.lazyQuery
        query: (type) => `${type}/random`,
      }),
    }),
  });
  
  // 导出的Hook名称变为useGetJokeByTypeLazyQuery
  export const { useGetJokeByTypeLazyQuery } = jokesApi;

App.js（使用懒查询的触发函数）

import { useGetJokeByTypeLazyQuery } from './ApiSlice'

const App = () => {
  // 解构出触发函数getJoke，以及请求状态
  const [getJoke, {
    data,
    isLoading,
    isSuccess,
    isError,
    error
  }] = useGetJokeByTypeLazyQuery()

  return (
    <div>
      {/* 点击按钮时调用getJoke并传入参数 */}
      <button onClick={() => getJoke('programming')}>click here</button>
      
      {/* 可选：添加状态和数据展示 */}
      {isLoading && <p>加载中...</p>}
      {isSuccess && data && (
        <div>
          <h4>{data.setup}</h4>
          <p>{data.punchline}</p>
        </div>
      )}
      {isError && <p>请求失败：{error.message}</p>}
    </div>
  )
}

export default App

补充说明 #

• 如果不需要手动触发，只想组件挂载时自动请求，那只需要删除按钮的onClick={get}，原代码已经会自动发起请求，直接渲染data里的内容即可。
• 懒查询的核心是将请求触发时机交给开发者控制，适合需要用户交互才发起请求的场景。

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