为何使用filter的delete函数删除元素后页面数组未更新？

问题场景 #

使用useState管理items数组，添加元素功能正常，但用filter实现的deleteItems函数执行后页面数组不更新；用splice实现的版本却能正常工作。

相关代码 #

添加元素函数：

const listofitem = () => {
  setitems((e) => {
    return [...e, list];
  });
};

filter实现的删除函数：

const deleteItems = (e) => {
  setitems((e1)=> {
    return e1.filter( (er, index)=> {
      return index!=e;
    });
  });
};

splice实现的删除函数：

const deleteItems = (e) => {
  items.splice(e-1, 1);
  setitems((e1)=>{
    return e1;
  })
};

问题原因 #

1. filter版删除函数参数匹配错误 #

实际调用deleteItems时，传入的是index+1（数组元素的渲染顺序号，而非真实索引），但filter逻辑里用index != e做判断——数组元素的真实索引永远不等于index+1，导致filter保留了所有元素，返回的数组和原状态完全一致，React检测不到状态变化，页面因此不更新。

2. splice版的“生效”是巧合，存在规范问题 #

splice会直接修改原items数组（违反Reactstate不可变的核心原则），之后调用setItems返回当前状态，虽然触发了页面更新，但这种写法会导致state与视图的一致性风险，属于不规范的错误写法。

正确的filter写法 #

两种修正方式：

• 方式一：调用时传入真实索引
  修改渲染时的按钮点击事件：

<button onClick={() => deleteItems(index)}>delete</button>

对应的deleteItems函数：

const deleteItems = (targetIndex) => {
  setitems(prevItems => prevItems.filter((_, index) => index !== targetIndex));
};

• 方式二：在函数内部处理传入的序号
  如果要保留传入index+1的逻辑，在函数里转成真实索引：

const deleteItems = (e) => {
  setitems(prevItems => prevItems.filter((_, index) => index !== e - 1));
};

关键原则提醒 #

React更新state时必须遵循不可变原则：数组类型的state更新，要返回新数组（比如用filter、map、扩展运算符创建新数组），绝对不能直接修改原数组（比如splice、push、pop这类方法）。

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