REACT Delete Element in array of objects

Question

I am having trouble deleting an element inside an array of objects. I want to simply delete an object inside the array. When I try to use .IndexOf(). It gives me back -1. is there a way to do this without creating a reference to each object.

This is my Array of objects.

   let todos = [{
      id: 1,
      task: 'Finish This React App'
    },{
      id: 2,
      task: 'Do Another App'
    },{
      id: 3,
      task: 'Pass data from the parent to the child and reverse'
    }]

let task = {id:2,task:'Do Another App'}

let todosArray = this.props.todos

todosArray.indexOf(task,0) //= -1

Overall I want to only have objects 1 and 3 inside the todos array.

Answer 1

您可以在纯香草ES6中使用滤镜：

var array = todos.filter(item => item.id === 1 || item.id === 3);

Answer 2

The Array#indexOf method always returns -1 since the objects reference is not the same.

You can use Array#findIndex , Array#every , Object.keys() and Array#splice methods.

 let todos = [{ id: 1, task: 'Finish This React App' }, { id: 2, task: 'Do Another App' }, { id: 3, task: 'Pass data from the parent to the child and reverse' }] let task = { id: 2, task: 'Do Another App' }; let keys = Object.keys(task); // remove element from the array by index todos.splice( // get the index of the element todos.findIndex(function(obj) { // check all property values are equal return keys.every(function(k) { return task[k] === obj[k]; }); // if you want to check only the `id` property then // you can avoid the above codes and use // return obj.id === task.id; }), 1); console.log(todos) 

Note : Above methods only works if there is no nested object and array property value.