Redux Toolkit RTK Query mutation请求成功但返回数据为undefined如何解决

问题排查及解决方法 #

你可以逐一检查以下几个常见错误点，基本可以覆盖当前问题的所有可能性：

• 1. query函数参数定义错误
  RTK Query的query配置项仅支持接收一个入参，你当前定义了两个入参(values: loginValuesType, redirect?: string)，第二个参数会被RTK Query忽略，所有需要传递的参数都需要封装到第一个参数对象中。修正示例：

query: (args: {values: loginValuesType, redirect?: string}) => {
  const { values: {username, password}, redirect } = args;
  const headers = gettingSomeHeaderHere
  return {
    url: "login",
    method: "GET",
    headers,
    crossDomain: true,
    responseType: "json",
  };
}

调用时对应修改：

login({values: {username, password}, redirect: '/home'})

• 2. Store配置缺失
  这是最常见的导致data为undefined的原因，你需要确认在configureStore时，正确添加了RTK Query的reducer和中间件：

import { configureStore } from '@reduxjs/toolkit'
import { theiaBaseApi } from './你的baseApi路径'

export const store = configureStore({
  reducer: {
    // 必须添加这一行，reducerPath要和你createApi时定义的一致，默认是'api'
    [theiaBaseApi.reducerPath]: theiaBaseApi.reducer,
  },
  // 必须添加api中间件，用来处理缓存、状态同步等逻辑
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(theiaBaseApi.middleware),
})

• 3. 变量拼写笔误
  你的示例代码中存在变量名不一致的问题：定义的是const header = gettingSomeHeaderHere，但返回请求配置时用的是headers，如果实际代码也是这样的话，会导致请求头异常，建议先核对修正。

• 4. 调用mutation后未等待请求完成就取值
  login调用返回的是Promise对象，如果你是在submitLogin里调用login后直接同步打印data，此时请求还未完成，状态还未更新，自然拿到的是undefined。你可以通过两种方式拿到返回值：

  1. 等待组件重渲染后读取响应式的data变量（请求完成后组件会自动重渲染，data会被赋值）
  2. 调用unwrap()方法直接从Promise中获取返回值：

  const submitLogin = async () => {
    try {
      const result = await login({username, password}).unwrap();
      console.log('请求返回数据：', result)
    } catch (err) {
      console.error('请求失败：', err)
    }
  }
  

• 额外建议
  当前你用GET方法提交登录请求，账号密码会直接暴露在请求URL中，存在安全风险，建议改为POST方法，参数放在请求体中传输。

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