在TypeScript+Next.js中如何根据索引过滤移除对象数组元素？

架构老林

2026-8-15

通过索引移除列表元素的正确实现

原代码存在的问题

splice用法错误：splice会直接修改原数组，且返回的是被删除元素组成的数组。你写的cart = cart.splice(index, 1)会把cart变成仅包含被删除元素的数组，完全背离保留其余元素的需求。
无效的filter调用：cart.filter(cart[index])不符合filter语法，filter需要传入判断逻辑的回调函数，这行代码无法实现过滤效果。
直接修改state（若cart是React state）：直接修改原state数组后调用setCartItems，可能无法触发组件重新渲染，因为React依赖引用变化检测state更新。

正确实现方式

方法一：使用`filter`生成新数组

function removeCartItemHandler(index) {
  console.log(index);
  if (index !== -1) {
    // 过滤掉目标索引对应的元素，生成全新数组
    const updatedCart = cart.filter((_, itemIndex) => itemIndex !== index);
    setCartItems(updatedCart);
  }
  console.log(cart);
}

filter遍历数组时，仅保留索引不等于目标索引的元素，返回新数组且不改动原数组，符合React state的更新规则。

方法二：使用`slice`拼接新数组

function removeCartItemHandler(index) {
  console.log(index);
  if (index !== -1) {
    // 截取目标索引前后的元素，拼接成新数组
    const updatedCart = [...cart.slice(0, index), ...cart.slice(index + 1)];
    setCartItems(updatedCart);
  }
  console.log(cart);
}

slice不会修改原数组，slice(0, index)获取数组开头到目标索引前的元素，slice(index + 1)获取目标索引后的元素，通过扩展运算符拼接成新数组。