从数组中删除对象?

Question

从数组中删除对象无法正常工作，但它可以完美地添加对象

const addItem =(selected)=>{
let data = selectedItems ? [...selectedItems] : [];
if (data.length) {
let index = data.indexOf(selected);
console.log(index);
if (index !== -1) {
data.splice(index, 1);
setSelectedItems(data);
} else {
data.push(selected);
}
} else {
data.push(selected);
}
console.log("selected", selectedItems);
setSelectedItems(data);
}

渲染按钮功能 单击时添加或删除

<div className="file-list">
<MappedElement 
data={[{ _id: 1 }, { _id: 2 }]}  
renderElement={(value, index, arr) => { 
let check=selectedItems.some((obj) => obj._id === value._id); 
console.log("check", check); 
return ( 
<DocumentCard key={index} className={file-list-item ${check ? 
"active" : ""}} 
onClick={() => addItem(value, arr, index)} /> ); }} /> 
</div> 

Answer 1

对于如下所示的selectedItems数组：

const selectedItems = [
{ _id: 1, /* other fields */ },
{ _id: 2, /* other fields */ },
{ _id: 3, /* other fields */ },
/* other objects */
];

以及如下所示的selected对象：

const selected = { _id: 1 };

为了执行所需的行为，即：如果元素存在，请删除它，否则添加它，您可以编写以下内容：

// copy selected items with a fail-safe empty array
const data = selectedItems ? [...selectedItems] : [];
// find index of selected element
const removalIndex = data.findIndex(({ _id }) => (_id === selected._id));
// if selected element exists in data array, remove it
if (removalIndex !== -1) {
data.splice(removalIndex, 1);
}
// if selected element doesn't exist in data array, add it
else {
data.push(selected);
}
// update selected elements
setSelectedItems(data);

注意：如果所选项目的数组包含重复项，这意味着包含相同值的多个对象_id，则此方法将仅删除这些项目的第一个实例。如果要删除所有这些，则必须使用循环或递归。

Answer 2

您的问题可能出在您正在使用indexOf方法中。

您不能使用它来查找数组中的对象。

您可以使用多个选项。您可以使用 find 或 findIndex 并传递回调以按指定的(最好是对象的唯一属性(查找对象。

例

let found = data.findIndex(item => item.id === selected.id);

Answer 3

使用

const addItem =(selected)=>{
let data = selectedItems ? [...selectedItems] : [];
if (data.length) {
let index = data.findIndex(value => value._id === selected._id)ж
console.log(index);
if (index !== -1) {
data.splice(index, 1);
} else {
data.push(selected);
}
} else {
data.push(selected);
}
console.log("selected", selectedItems);
setSelectedItems(data);
}