数组indexOf返回负索引(-1)导致splice替换对象失败问题求助

我来帮你搞定这个问题！你碰到的核心问题其实是JavaScript对象的引用比较特性，这才导致indexOf返回了-1而不是预期的0。

为什么会出现这个问题？ #

JavaScript里的对象属于引用类型，indexOf方法是通过严格相等运算符===来匹配元素的。你打印的action.payload[0]看起来和数组里第一个对象内容完全一样，但它们是两个独立的对象实例——在内存里的引用地址不同，所以indexOf会认为这不是同一个元素，自然找不到匹配的索引，返回-1。

正确的解决方案 #

我们可以改用findIndex方法，通过对象的唯一标识（比如你的id字段）来定位目标元素的索引，这是处理对象数组最常用也最可靠的方式。修改你的代码如下：

case UPDATE_TODO:
  const newTodos = [...state];
  // 用findIndex根据id匹配目标对象的索引
  const getIndex = newTodos.findIndex(todo => todo.id === action.payload[0].id);
  
  // 确保找到有效索引后再执行替换操作
  if (getIndex !== -1) {
    newTodos.splice(getIndex, 1, action.payload[1]);
  }
  
  return newTodos;

代码解释 #

• findIndex允许你自定义匹配逻辑，这里我们通过todo.id === action.payload[0].id来匹配目标对象，只要id一致就能找到正确的索引，完全不受对象引用的影响。
• 增加if (getIndex !== -1)的判断是为了容错：如果传入的id不存在于数组中，不会执行splice避免出错。

另一种思路（不推荐但可以理解） #

如果你一定要用indexOf，可以先通过find找到数组里的原对象，再用indexOf获取索引：

case UPDATE_TODO:
  const newTodos = [...state];
  const targetTodo = newTodos.find(todo => todo.id === action.payload[0].id);
  const getIndex = newTodos.indexOf(targetTodo);
  
  if (getIndex !== -1) {
    newTodos.splice(getIndex, 1, action.payload[1]);
  }
  
  return newTodos;

不过这种方式多了一步查找，效率不如直接用findIndex，所以更推荐第一种方案。

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