フィルタリング配列 - リアクトチュートリアル後Reduxの

Question

、私はそのIDを使用してアレイからのメッセージを削除するために減速してこのコードを参照してください。

：

が、これは、より良いように記述することはないでしょう

else if (action.type === 'DELETE_MESSAGE') { return { messages: [ ...state.messages.filter(m => m.id === action.id) ], }; };

私はfilterの状態を変更すると、同じ配列を返すことがあり秒間考えたが、MDNに応じて、新しい配列を作成します。

私は安全で、私の実装は正しいですか？

Answer 1

はい。それは実際には非常にきれいな解決策になります。そのトリックは、Array#filterでは、配列のすべての要素が複数の引数を受け入れる関数で適用されるということです。 2番目の引数は、ソース配列内の要素のインデックスです。

だから、あなたはインデックスを知っていることを考えると、それは単に

(state, action) => ({ 
    ...state, 
    messages: state.messages.filter((item, index) => index !== action.index) 
}) 

しかし、あなたはインデックスを知らないのです。代わりに、値はidです。

(state, action) => ({ 
    ...state, 
    messages: state.messages.filter(item => item.id !== action.id) 
}) 

注意してください：この場合、あなたは正しい、あなたは単にターゲットidに等しいないidの値を持つ要素を入れただけに、このidに対するソース配列をフィルタ処理する必要があります。 state.messagesを広げて新しい配列に戻す必要はありません。 Array#filterはソース配列を変更しません。これは素晴らしいことです。

===の代わりに!==です。あなたは近くにいた。