Reactjs 将数组与数组进行比较并删除元素

我有一个通过状态从

const[response，setResponse]=useState（[]）输入的项目列表响应变量。我正在尝试实现“删除所有选定项”功能。我如何尝试做到这一点，我有一个名为
const[tobeDeleted，setTobeDeleted]=useState（[]）的状态数组
。每次我选择一个项目时，所选项目的
id
将被推送到该数组，反之亦然。如果我取消选择该项目，它将从数组中删除

现在我想实现的是，当您选择一个项目并单击
删除所选产品
按钮并触发
removeAll
功能时，我想此功能检查两个数组中的
响应
数组和
待删除
数组，并过滤
响应
数组o删除
toBeDeleted
数组中存在
id
的每个项目。我已经完成了一个相互检查的数组，但我不确定如何执行删除部分。有人能帮我吗

谢谢，我已经提供了一个工作代码和沙盒，以便更加清晰

您需要执行以下操作：

    const filteredResponse = response.filter((element)=> !toBeDeleted.includes(element.id) )

考虑到响应具有以下结构：

   [
    {
     id: .......,
     ......
    },
    .......
   ]

如果响应只是一个id数组，那么它将是元素，而不是元素.id。
稍后，您可以将响应设置为filteredResponse以重新渲染。
您需要执行以下操作：

    const filteredResponse = response.filter((element)=> !toBeDeleted.includes(element.id) )

考虑到响应具有以下结构：

   [
    {
     id: .......,
     ......
    },
    .......
   ]

如果响应只是一个id数组，那么它将是元素，而不是元素.id。
稍后，您可以将响应设置为filteredResponse，以重新渲染。
Modified
removeAll
函数：

const removeAll = () => {
    const newRes = response.filter((f) => !deleteItems.includes(f.productId));
    setResponse(newRes);
    setDeleteItems([]);
  };

正在使用演示。
修改的
removeAll
功能：

const removeAll = () => {
    const newRes = response.filter((f) => !deleteItems.includes(f.productId));
    setResponse(newRes);
    setDeleteItems([]);
  };

正在进行演示。
谢谢！成功了！谢谢！成功了！