RTK Query Mutation返回uninitialized，POST后GET无法自动重取数据

1. Mutation执行后状态显示uninitialized的原因及解决 #

你在调用setUser后立刻console.log(result)，此时异步请求尚未发起，状态自然是uninitialized。RTK Query的mutation状态是异步更新的，需要通过监听状态变化来获取真实结果：

修改组件代码，监听mutation状态 #

import React, { useState, useEffect } from "react";
import { useSetUserMutation } from "../../../store/store";
import { useSelector } from "react-redux";

function Row({ row, columnaEstado, columnaVer, handleSelect, selected }) {
  const { session_id: token } = useSelector(({ session }) => session);
  const [setUser, result] = useSetUserMutation();

  // 监听mutation状态变化
  useEffect(() => {
    if (result.isSuccess) {
      console.log("请求成功", result.data);
    } else if (result.isError) {
      console.log("请求失败", result.error);
    } else if (result.isLoading) {
      console.log("请求中...");
    }
  }, [result]);

  const handleDoubleClick = (e) => {
    if (e.detail === 2) {
      setUser({ token, row });
      // 不要在此处立即打印result，此时状态还未更新
    }
  };

  const { formatter: estadoFormatter } = columnaEstado;
  const { formatter: accionFormatter } = columnaVer;
  const selectedStyle = (selected) => {
    return selected ? { backgroundColor: "#eeeeee" } : {};
  };

  return (
    <tr
      key={row.COD_USUARIO}
      onClick={() => handleSelect(row)}
      style={selectedStyle(selected)}
    >
      <td>{row.RNUM}</td>
      <td>{row.ID_USUARIO}</td>
      <td onClick={handleDoubleClick}>{estadoFormatter(row.ESTADO)}</td>
      <td>{accionFormatter([], row)}</td>
    </tr>
  );
}

export default Row;

2. GET请求未自动重取的问题修复 #

你的invalidatesTags参数存在错误，且providesTags配置不完整，导致RTK Query无法触发列表重取：

修改API切片代码 #

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import config from "../../config";

export const usersApi = createApi({
  reducerPath: "users",
  baseQuery: fetchBaseQuery({
    baseUrl: `${config.apiUrl}/api/security`,
  }),
  endpoints: (builder) => ({
    fetchAllUsers: builder.query({
      providesTags: (result) => {
        if (!result?.data) return [{ type: "user", id: "LIST" }];
        // 同时返回单个用户标签和列表总标签，兼顾精准重取和全量重取
        return [
          ...result.data.map(user => ({ type: "user", id: user.COD_USUARIO })),
          { type: "user", id: "LIST" }
        ];
      },
      query: (token) => ({
        url: `UsuariosAll/${token}`,
        method: "GET",
        headers: { "content-type": "application/x-www-form-urlencoded" },
      }),
    }),
    setUser: builder.mutation({
      // 修正：arg是传入的{token, row}对象，需从arg.row中取用户ID
      invalidatesTags: (result, error, arg) => [
        { type: "user", id: arg.row.COD_USUARIO },
        // 若需要修改后直接重取整个列表，添加LIST标签
        { type: "user", id: "LIST" }
      ],
      query: ({ token, row }) => ({
        url: `MenuByUsuario/${token}`,
        method: "POST",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        params: {
          cod_usuario: row.COD_USUARIO,
          status_usuario: row.ESTADO === "ACTIVO" ? 0 : 1,
        },
      }),
    }),
  }),
});

export const { useFetchAllUsersQuery, useSetUserMutation } = usersApi;

关键说明 #

• invalidatesTags参数修正：你之前的代码中，invalidatesTags的第三个参数命名为user，但实际传入的是{token, row}对象，必须通过arg.row.COD_USUARIO获取用户ID，才能确保标签匹配。
• 添加列表总标签：providesTags中新增{type: 'user', id: 'LIST'}，既可以通过单个用户标签实现精准重取，也可以通过总标签触发全量列表重取，适配不同需求。
• 后端POST接口不影响：后端用POST做修改而非PATCH，完全不影响RTK Query的标签失效逻辑，只要标签配置正确就能自动触发重取。

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