根据值数组从数组中删除项目[重复]答案

【问题标题】：Remove items from array based on array of values [duplicate]根据值数组从数组中删除项目[重复]
【发布时间】：2020-11-06 08:59:25
【问题描述】：

我似乎找不到解决方案，如何根据值数组从数组中删除项目？与删除一个相同的方式？


const [items, setItems] = useState([
  {id: 1, name: "foo"},
  {id: 2, name: "bar"},
  {id: 3, name: "baz"}
])

我需要删除一些ids：

const idsToRemove = [1,3]

// I thought I'd loop
idsToRemove.map(i => items.filter(item => item.id !== i))

这将返回一个数组，并且感觉有些不对劲。如果要删除一个项目，那没关系，但是通过一组 id 从数组中删除项目我不知道从哪里开始。

在循环中，我尝试使用delete，但“未定义”在数组中：[undefined]：

idsToRemove.map(i => items.map(item => delete item.id === i))

到目前为止，React says you cannot update state during a loop。基于idsToRemove，我怎样才能在状态中得到一个项目？

【问题讨论】：

标签： javascript arrays reactjs

【解决方案1】：

您需要将filter 呼叫置于外部：

items.filter(item => !idsToRemove.includes(item.id))

【讨论】：

【解决方案2】：

您可以将filter 与includes 一起使用。

items = items.filter(({id})=>!idsToRemove.includes(id));

let items = [
  {id: 1, name: "foo"},
  {id: 2, name: "bar"},
  {id: 3, name: "baz"}
];
const idsToRemove = [1,3]
items = items.filter(({id})=>!idsToRemove.includes(id));
console.log(items);

【讨论】：

【解决方案3】：

const items = [
  {id: 1, name: "foo"},
  {id: 2, name: "bar"},
  {id: 3, name: "baz"}
];

const idsToRemove = [1, 3];

console.log(
  items.filter(({ id }) => !idsToRemove.includes(id))
);

【讨论】：

【解决方案4】：

const [items, setItems] = useState([
  {id: 1, name: "foo"},
  {id: 2, name: "bar"},
  {id: 3, name: "baz"}
]
const idsToRemove = [1,3]

setItems(items.filter((item)=> !idsToRemove.includes(item.id)))

使用函数式编程，您不会更改当前状态 obj，而是创建一个新状态，从而保持 React 不变性的合理性。

【讨论】：