删除对象时如何返回修改后的数组

Question

我有一个使用上下文 api 分布在 2 个组件之间的数组。

将对象添加到数组工作正常，但是从数组中删除对象时，我似乎无法返回修改后的数组。本质上它不会在 UI 中删除。

这是我的 onClickHandler 和沙箱的链接。

  const onClickHandlerDelete = (user) => {
    const itemToBeRemoved = user;
    const array = favourites.splice(
      favourites.findIndex((favourite) => favourite.id === itemToBeRemoved.id),
      1
    );
    return array;
  };

Answer 1

如果没有看到您的 UI 代码，很难说在单击时更新 UI 是否存在其他问题，但您当前的 onClickHandlerDelete 似乎不正确。

根据条件从数组中删除一项或多项的最简单方法是使用filter：

const onClickHandlerDelete = (user) =>
  favourites.filter((fav) => fav.id !== user.id)