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

Posted 2023-02-27

【中文标题】根据值数组从数组中删除项目[重复]

【英文标题】：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，我怎样才能在状态中得到一个项目？

【参考方案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 不变性的合理性。