如何防止RTK Query中条目被重复删除？

问题根源分析 #

1. 无效配置干扰缓存更新：removeUserListSetting mutation的query里加了refetchOnMountOrArgChange: true，这个参数是给全局API配置或查询接口用的，放在mutation里完全无效，还可能干扰缓存逻辑。
2. 标签匹配不够精准：原代码里的标签只使用了['userList']这种全局标签，RTK Query的缓存更新机制可能因为标签匹配粒度太粗，没有触发预期的列表刷新。
3. 未处理mutation重复触发：删除按钮没有限制重复点击，加上UI未及时更新，容易导致用户误操作触发二次删除。

具体修复步骤 #

1. 修正API切片配置

修改listActionAPI中的fetchUserListSettings和removeUserListSetting配置：

export const listActionAPI = createApi({
  reducerPath: 'listActionAPI',
  baseQuery: fetchBaseQuery({
    baseUrl: `${appconfig.API_URL}UserCustomListSettings`
  }),
  tagTypes: ['userList'],
  refetchOnMountOrArgChange: true,
  endpoints: (build) => ({
    fetchUserListSettings: build.query<IUserCustomListSetting[], void>({
      query: () => ({ url: '' }),
      // 生成精准的标签：每个条目单独标签+列表全局标签
      providesTags: (result) =>
        result
          ? [
              ...result.map(({ id }) => ({ type: 'userList' as const, id })),
              { type: 'userList' as const, id: 'LIST' },
            ]
          : [{ type: 'userList' as const, id: 'LIST' }],
    }),
    // ...其他接口保持不变
    removeUserListSetting: build.mutation<void, string>({
      query: (id) => ({
        url: `/${id}`,
        method: 'DELETE',
        // 移除无效的refetchOnMountOrArgChange配置
      }),
      // 精准失效对应条目标签和列表全局标签，触发缓存刷新
      invalidatesTags: (result, error, id) => [
        { type: 'userList', id },
        { type: 'userList', id: 'LIST' },
      ],
    }),
    // ...其他接口保持不变
  }),
});

2. 优化组件删除逻辑

增加重复点击限制，并正确处理mutation结果：

const [removeListAction, { isLoading }] = useRemoveUserListSettingMutation();
const handleRemoveUserListSettings = useCallback(
  async (id: string) => {
    // 加载中时禁止重复触发
    if (isLoading) return;
    try {
      // unwrap获取真实的成功/失败结果
      await removeListAction(id).unwrap();
    } catch (err) {
      console.error('删除用户列表设置失败:', err);
      // 这里可以添加错误提示，比如弹窗告知用户
    }
  }, 
  [removeListAction, isLoading]
);

3. 确保组件使用RTK Query缓存数据

渲染列表时，直接使用useFetchUserListSettingsQuery返回的data，不要维护本地状态：

const { data: userListSettings } = useFetchUserListSettingsQuery();

// 渲染列表
return (
  <div>
    {userListSettings?.map(item => (
      <div key={item.id}>
        <span>{item.name}</span>
        <button 
          onClick={() => handleRemoveUserListSettings(item.id)}
          disabled={isLoading}
        >
          删除
        </button>
      </div>
    ))}
  </div>
);

修复说明 #

• 精准的标签配置让RTK Query能精准识别需要更新的缓存条目，自动触发组件刷新，无需手动刷新页面。
• 重复点击限制避免了在mutation未完成时再次触发请求，解决二次删除问题。
• 直接使用RTK Query的缓存数据，确保UI始终和后端数据保持一致。

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