Redux Toolkit中onCacheEntryAdded报错：draft.push is not a function

出现draft.push is not a function错误的核心原因是：当前updateCachedData拿到的draft不是数组类型，可能是对象、null、undefined或者其他不具备push方法的类型。draft直接对应你RTK Query缓存中存储的数据结构，所以得从缓存初始化和数据类型匹配入手解决。

修复步骤： #

1. 确认初始缓存数据类型
   检查你定义RTK Query查询时的初始数据（initialData）、查询函数返回值是否为数组。比如：

   • 如果查询的initialData设成了{}或者null，那draft自然不是数组，无法调用push。
   • 如果接口返回的是包含数组的对象（比如{ list: [...] }），要确保查询函数提取出数组部分存入缓存，而不是直接存整个对象。

2. 在updateCachedData中做类型兼容处理
   如果存在缓存初始值可能非数组的情况，先判断类型再处理：

   updateCachedData((draft) => {
     if (!message.payload) return;
     // 若draft不是数组，直接返回包含新数据的数组
     if (!Array.isArray(draft)) {
       return [message.payload];
     }
     // 是数组则正常push
     draft.push(message.payload);
   });
   

   如果缓存数据本身就是对象（比如需要往对象里的数组属性添加元素），则调整逻辑：

   updateCachedData((draft) => {
     if (!message.payload) return;
     // 确保对象中的目标属性是数组
     if (!Array.isArray(draft.items)) {
       draft.items = [];
     }
     draft.items.push(message.payload);
   });
   

3. 排查查询函数的返回值
   确保你的queryFn返回的是数组类型。比如接口返回的是嵌套结构，要正确提取数组：

   queryFn: async () => {
     const res = await fetch('/api/your-data');
     const responseData = await res.json();
     // 提取数组部分返回，让缓存存储数组
     return responseData.dataList;
   }
   

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