RTK Query转换响应时大写对象键首字母无效问题排查

DevOps 小满

2026-7-15

问题分析与修复

问题原因

你当前的代码只生成了首字母大写的键名字符串，但没有对目标对象做任何修改操作——既没有将旧键的值映射到新键，也没有处理旧键的移除，因此deepCopy对象完全保持原样，自然看不到效果。

修复方案

第一步：定义转换后的类型

由于TypeScript强类型约束，需要先声明首字母大写后的对象类型：

export type CapitalizedBudgetType = {
    Bills: number | null,
    Transportation: number | null,
    Health: number | null,
    School: number | null,
    Food: number | null,
    Entertainment: number | null
};

第二步：修改RTK Query的转换逻辑

推荐使用Object.fromEntries实现更简洁的键名转换：

getBudget: build.query<CapitalizedBudgetType, void>({
    query: () => "budget",
    providesTags: ["Budget"],
    transformResponse: (response: BudgetType) => {
        return Object.fromEntries(
            Object.entries(response).map(([key, value]) => {
                // 生成首字母大写的新键名
                const newKey = key.charAt(0).toUpperCase() + key.slice(1);
                return [newKey, value];
            })
        ) as CapitalizedBudgetType;
    }
}),

如果偏好forEach写法，也可以手动构建新对象：

transformResponse: (response: BudgetType) => {
    const transformed: CapitalizedBudgetType = {
        Bills: null,
        Transportation: null,
        Health: null,
        School: null,
        Food: null,
        Entertainment: null
    };
    Object.keys(response).forEach((key) => {
        const newKey = key[0].toUpperCase() + key.slice(1) as keyof CapitalizedBudgetType;
        transformed[newKey] = response[key as keyof BudgetType];
    });
    return transformed;
}