ネストされたオブジェクトからデータを変更せずに削除する

Question

配列の一部であるオブジェクトからオブジェクトを削除する方法はありますか？ 私はしばらくの間ReactとReduxで作業していましたが、状態を変更することなくデータを削除または挿入する必要があるたびに、数時間かかることがありました。

減速は、IDと、このようなオブジェクトと別の配列を有するオブジェクトを含む配列である：

[ 
{ id:123, 
    items:[ 
      { id: abc, 
      name: albert 
      }, 
      ... 
     ] 
}, 
... 
] 

Iの両方のIDを受信し、ID abcでアイテムを削除する必要があります。

Answer 1

IDによって配列から項目を削除するには：

return state.filter(item => item.id !== action.id) 

let copy = Object.assign({}, state) // assuming you use Object.assign() polyfill! 
delete copy[action.id] // shallowly mutating a shallow copy is fine 
return copy 

（ボーナス）と同じ：

は、IDによってオブジェクトからキーを削除しますobject spread operator proposal：

let { [action.id]: deletedItem, ...rest } = state 
return rest 

Answer 2

Underscore's rejectを使用できます。あなたがしようとしていることを正確に行います。

Answer 3

あなたは、プレーンJavaScriptが決定した場合、私は考えることができる最もエレガントな方法は、状態を軽減するためにArray.prototype.reduceを使用することです：

var state = [ 
{ id: 123, 
    items:[ 
      { id: 'abc', 
      name: 'albert' 
      }, 
      ... 
     ] 
}, 
... 
] 

function filterOut (state) { 
    return (bucketId, personId) => { 
    return state.reduce((state, bucket) => { 
     return state.concat(
     (bucketId === bucket.id) ? 
      Object.assign({}, bucket, {items: bucket.items.filter((person) => person.id !== personId)}) : 
      bucket 
    ); 
    }, []); 
    } 
} 

var newState = filterOut(state)(123, 'abc'); 

Answer 4

lodash's omit methodも使用できます。

lodashをインポートすると、ビルドサイズがかなり増加することに注意してください。可能であれば、Dan's answerに記載されているオブジェクトスプレッド演算子を使用することをお勧めします。

Answer 5

私は

if(action.type === "REMOVE_FROM_PLAYLIST"){ 
     let copy = Object.assign({}, state) 
     delete copy.playlist[action.index].songs[action.indexSongs]; 

     return copy; 
    } 

このように私の問題を解決するには、それが他のいずれかのに役立ちます願っています。

Answer 6

const remove = (state, bucketId, personId) => state.map(
    bucket => bucket.id === bucketId 
    ? { ...bucket, items: bucket.items.filter(person => person.id !== personId) } 
    : bucket, 
); 

使用法：

const state = [ 
    { 
    id: 123, 
    items: [ 
     { 
     id: 'abc', 
     name: 'Kinna', 
     }, 
     { 
     id: 'def', 
     name: 'Meggy', 
     }, 
    ], 
    }, 
    { 
    id: 456, 
    items: [ 
     { 
     id: 'ghi', 
     name: 'Ade', 
     }, 
     { 
     id: 'jkl', 
     name: 'Tades', 
     }, 
    ], 
    }, 
]; 

console.log(remove(state, 123, 'abc'));