從陣列中刪除 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值，則此方法將僅刪除其中的第一個實例。 如果要刪除所有這些，則必須使用循環或遞歸。