如何在 React 中使用 JavaScript 從數組中刪除 object 元素

Question

我想刪除其 id 與 deleteItem(index) 中的索引匹配的 items(Array) 元素。
以下是我迄今為止嘗試過的代碼：

  constructor(){
    super()        
    this.state = {
      items : [
        { id: 34523, type: 'a', data: 'aaa' },
        { id: 23452, type: 'b', data: 'bbb' }.
        { id: 45644, type: 'c', data: 'ccc' }
      ]
    }
  }

  deleteItem(index){
    const copyStateAr = Object.assign([], this.state.items)
    copyStateAr.splice(index, 1);
    this.setState({
      items: copyStateAr
    })  
  }  

注意：當我將 id 設為 1、2、3 時，上面的代碼工作正常。但如果我先刪除第二個元素，那么第三個元素不會被刪除。
此外，如果可能的話，建議我使用其他方法或方法來完成相同的任務（它是一種搜索（id）和刪除元素）。

Answer 1

你最好的選擇是：

1. 不要按索引刪除，按id刪除
2. 使用setState的回調形式，以便處理最新信息

那是因為 state 更新可能是異步的並且可能是批處理的，因此依靠索引可以為奇怪的邊緣情況失敗做好准備。

所以：

deleteItem(id) {
    this.setState(({items}) => ({items: items.filter(e => e.id !== id)}));
}

Answer 2

只需按 ID 刪除對象

deleteItem(id){
    this.setState({
      items: this.state.items.filter(x => x.id !== id)
    })  
  }  

Answer 3

指數不斷變化。 所以如果你有

{ id: 34523, type: 'a', data: 'aaa' },
        { id: 23452, type: 'b', data: 'bbb' }.
        { id: 45644, type: 'c', data: 'ccc' }

刪除 2 索引

然后結構變成

{ id: 34523, type: 'a', data: 'aaa' },
      
        { id: 45644, type: 'c', data: 'ccc' }

所以你最好開始按 id 元素刪除。 如果索引 <= 元素數並且未找到發送消息索引，則添加一個條件。 您可以制作原始副本並從副本中刪除。 所以原始數據總是有完整的。

Answer 4

您可以使用.forEach 高階function 刪除具有指定id 的object，然后使用setState 更改state；

const newArray = [];
this.state.items.forEach(object => {
    if ( object.id != specifiedId ) newArray.push(object);
});

this.setState({items: newArray});

希望能幫助到你 ！

Answer 5

只需修改copystatear

const copyStateAr = Object.assign([], items).filter((value, i) => value.id !== id);