如何使用splice替代filter实现任意位置标签删除功能

核心注意点：splice是会直接修改原数组的可变方法，React状态更新不允许直接修改原状态值，所以操作前必须先对原标签数组做浅拷贝，否则会出现状态不更新、渲染异常的问题。

正确实现代码如下：

const deleteTag = (index) => {
  setTags((prevState) => {
    // 浅拷贝原数组，生成独立的新数组副本
    const tagsCopy = [...prevState];
    // 从目标索引位置开始，删除1个元素（即当前选中要移除的标签）
    tagsCopy.splice(index, 1);
    // 返回处理后的新数组完成状态更新
    return tagsCopy;
  });
};

逻辑说明 #

• splice第一个参数传入要删除的标签索引，第二个参数固定传1，代表仅删除索引位置对应的1个标签，无论标签在数组首位、末位还是中间位置，都能精准删除，最终效果和你之前用filter实现的逻辑完全一致。
• 不要直接在prevState原数组上调用splice，这种直接修改原状态的写法会导致React无法感知状态变化，引发页面不刷新的bug，错误写法参考：

❌ 错误示例（禁止使用）

const deleteTag = (index) => {
  setTags((prevState) => {
    prevState.splice(index, 1);
    return prevState;
  });
};

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