使用RTK Mutation时出现Cannot read properties of undefined错误求助

1. 检查authSlice中mutation的定义是否合规 #

确保你在createApi中正确配置了mutation，不能漏写invalidatesTags或返回无效值。RTK Query要求mutation的配置对象必须包含合法的invalidatesTags（可以是空数组、标签数组或返回数组的函数）。

错误示例：

// 错误：mutation未配置invalidatesTags或返回undefined
const authApi = createApi({
  reducerPath: 'authApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    login: builder.mutation({
      query: (credentials) => ({
        url: '/login',
        method: 'POST',
        body: credentials,
      }),
      // 此处漏写invalidatesTags会导致报错
    }),
  }),
});

正确示例：

const authApi = createApi({
  reducerPath: 'authApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['User'], // 先声明标签类型
  endpoints: (builder) => ({
    login: builder.mutation({
      query: (credentials) => ({
        url: '/login',
        method: 'POST',
        body: credentials,
      }),
      invalidatesTags: ['User'], // 配置合法的标签数组，不需要则设为[]
    }),
  }),
});

如果是用createSlice结合createAsyncThunk，注意不要把asyncThunk和RTK Query的mutation混淆，两者的使用逻辑完全不同。

2. 检查store中api reducer的注册 #

确保在configureStore时正确添加了authApi的reducer和中间件，这是RTK Query正常运行的必要条件。

错误示例：

// 错误：未注册api reducer或中间件
export const store = configureStore({
  reducer: {
    auth: authReducer, // 仅添加了slice reducer，缺少api reducer
  },
});

正确示例：

export const store = configureStore({
  reducer: {
    auth: authReducer,
    [authApi.reducerPath]: authApi.reducer, // 必须注册api的reducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(authApi.middleware), // 不能省略api中间件
});

3. 检查login.tsx中mutation hook的调用方式 #

必须使用RTK Query自动生成的useXXXMutation hook，不能直接调用mutation的定义函数。

错误示例：

// 错误：直接调用mutation定义函数而非hook返回的mutate方法
import { login } from './authSlice';

const handleLogin = () => {
  login(credentials); // 此处调用错误
};

正确示例：

import { useLoginMutation } from './authSlice';

const [login, { isLoading }] = useLoginMutation();

const handleLogin = () => {
  login(credentials); // 使用hook返回的mutate方法
};

4. 检查invalidatesTags的函数返回值 #

如果用函数形式配置invalidatesTags，必须确保函数始终返回数组（空数组或标签数组），不能返回undefined。

错误示例：

invalidatesTags: (result) => {
  if (!result) return; // 返回undefined会触发报错
  return ['User'];
},

正确示例：

invalidatesTags: (result) => {
  return result ? ['User'] : []; // 确保始终返回数组
},

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