React中使用splice配合indexOf删除数组元素时仅保留首个元素的问题

核心错误点 #

• 误用splice方法的返回值：splice是数组原地修改方法，会直接修改原数组，且返回值是被删除元素组成的数组，而非修改后的原数组。你将splice的返回值直接传给setInputValue，相当于直接把状态覆盖为仅包含被删除元素的数组，导致其余元素全部丢失。
• 违反React状态不可变原则：直接对属于状态的inputValue调用splice原地修改，React无法正确检测状态变化，会引发渲染异常。
• 对象数组使用indexOf查找元素不稳定：indexOf依赖引用相等判断，若数组后续重新生成新对象实例，会出现查找失败返回-1的问题。

修复代码 #

推荐使用filter方法生成新数组完成删除操作，符合React不可变更新的要求：

import React from "react";

function Todo({ element, inputValue, setInputValue }) {
  const deleteHandler = () => {
    // 用函数式更新获取最新状态，根据唯一id过滤要删除的元素
    setInputValue(prev => prev.filter(item => item.id !== element.id));
  };

  const completeHandler = () => {
    console.log(element.id);
    console.log(inputValue.findIndex(item => item.id === element.id));
  };

  return (
    <div className="todo">
      {element.text}{" "}
      <div>
        <button onClick={deleteHandler}>delete</button>{" "}
        <button onClick={completeHandler}>complete?</button>
      </div>
    </div>
  );
}

export default Todo;

如果需要用splice实现，要先拷贝原数组再操作：

const deleteHandler = () => {
  const newInputValue = [...inputValue];
  const targetIndex = newInputValue.findIndex(item => item.id === element.id);
  if (targetIndex > -1) {
    newInputValue.splice(targetIndex, 1);
    setInputValue(newInputValue);
  }
};

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