使用Context API共享数组时，删除元素后如何返回修改后的数组？

你的删除逻辑存在两个关键问题：

• splice 是直接修改原数组的方法，React 状态更新依赖新的数组引用，修改原数组不会触发组件重渲染，因此UI不会同步变化
• splice 返回的是被删除元素组成的数组，而非更新后的完整数组，你写的return array完全起不到更新状态的作用

正确的删除实现 #

用 filter 方法创建新数组（它不会修改原数组，而是返回全新的数组），再调用Context中的状态更新函数替换旧数组：

const onClickHandlerDelete = (user) => {
  // 过滤掉要删除的用户，生成新数组
  const updatedFavourites = favourites.filter(favourite => favourite.id !== user.id);
  // 调用Context里的状态更新函数（比如你定义的setFavourites）
  setFavourites(updatedFavourites);
};

为什么这样可行？ #

1. filter 返回的是新数组，和原数组引用不同，React能检测到状态变化，触发重渲染更新UI
2. 完全遵循React状态不可变的原则，避免直接修改原状态导致的各类异常

如果一定要用splice（不推荐），必须先复制原数组再操作：

const onClickHandlerDelete = (user) => {
  const index = favourites.findIndex(favourite => favourite.id === user.id);
  // 先复制原数组
  const updatedFavourites = [...favourites];
  // 在复制后的数组上执行splice
  updatedFavourites.splice(index, 1);
  setFavourites(updatedFavourites);
};

显然filter的写法更简洁直观，优先推荐第一种方案。

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