使用RTK Query实现收藏功能时findIndex总返回-1该如何解决？

问题根因 #

findIndex始终返回-1的核心原因是比对两侧的值类型/结构不匹配，从你提供的代码看有两种典型的触发场景：

场景1：添加收藏时存入的是纯ID值（最常见） #

你在makeFav reducer中是直接把action.payload存入cardFavId数组，如果调用makeFav时传的就是纯ID（数字/字符串），那么数组中的每一项都是基础类型的值，没有.id属性。
此时你在removeFav中取cardItem.id会返回undefined，和action.payload的ID值比对永远不相等，自然返回-1。

修复方法：

把removeFav中的查找逻辑直接比对值即可：

const index = state.cardFavId.findIndex(
  (cardItem) => cardItem === action.payload
);

你也可以直接用更简洁的filter方法完成移除，不需要手动找索引操作数组（RTK的createSlice支持直接修改状态，也不需要手动拷贝数组）：

removeFav: (state, action) => {
  console.log(action.payload, "payload remove pressed");
  state.cardFavId = state.cardFavId.filter(id => id !== action.payload)
}

场景2：调用removeFav时传参错误 #

如果你的cardFavId里存的确实是带id属性的对象，那就是你调用removeFav的时候传的不是ID值，而是整个对象，此时对象.id === 完整对象的比对永远不成立。

修复方法：

找到你调用removeFav的代码，把参数改为对象的id属性即可，示例：

// 错误写法
dispatch(removeFav(cardItem))
// 正确写法
dispatch(removeFav(cardItem.id))

报错截图 #

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