如何在 React 中使用 JavaScript 从数组中删除 object 元素

Question

I want to Delete an element of items(Array) whose id matches with index in deleteItem(index).
Below is the code, I've tried so far:

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

Note: Above code is working fine when I taking id as 1, 2, 3. But In case if I delete 2nd element first then the 3rd element doesn't getting deleted.
Also, if possible suggest me other method or approach to do the same task ( it is kind of search (id) and delete element).

Answer 1

Your best bet here is:

1. Don't delete by index , delete by id
2. Use the callback form of setState so you're dealing with up-to-date information

That's because state updates may be asynchronous and may be batched, so relying on the index can set you up for weird edge case failures.

So:

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

Answer 2

Just delete objects by ID

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

Answer 3

Index keeps changing. so if you have

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

deleted 2 index

then structure becomes

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

so you better start deleting by id element. ADD a condition if index is <= number of element and send message index not found. You can make a copy of original and delete from copy. So original will always have full data.

Answer 4

You can delete the object with the specified id using.forEach higher order function, then change the state using setState;

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

this.setState({items: newArray});

Hope it helps !

Answer 5

Just modify copystatear

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