从阵列中删除 object？

Question

从阵列中删除 object 无法正常工作，但它完美地添加了 object

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);
}

渲染按钮 function 添加或删除点击它

<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

利用

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);
}

Answer 2

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

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

您可以使用几个选项。 您可以使用 find 或 findIndex 并传递回调以通过指定（最好是对象的唯一属性）查找 object。

例子

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

Answer 3

对于如下所示的selectedItems数组：

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

和一个selected的 object 看起来像：

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值，则此方法将仅删除其中的第一个实例。 如果要删除所有这些，则必须使用循环或递归。