Reactのリストをフィルタリングするときの不知不変違反

Question

Rex.jsのキーワードでリストをフィルタリングするための検索フォームを含むリストをReduxで作成しました。

これは、コントローラ・コンポーネントの一部である：これはフィルタで

const mapStateToProps = (state) => { 
    // make a sorted array of the keys in the items object 
    var sortedItems = Object.keys(state.items).sort(function(a, b) { 
     if(state.items[a].name.toLowerCase() < state.items[b].name.toLowerCase()) return -1; 
     if(state.items[a].name.toLowerCase() > state.items[b].name.toLowerCase()) return 1; 
     return 0; 
    }); 

    // apply the filter to this array 
    sortedItems = filterByKeyword(sortedItems, state.items, state.filter.keyword); 

    return { 
     items: state.items, 
     sortedItems 
    } 
} 

：

export const filterByKeyword = function(sortedItems, items, keyword) { 
    keyword = keyword.toLowerCase(); 
    return sortedItems.filter(function(id) { 
     return items[id].name.toLowerCase().indexOf(keyword) !== -1; 
    }); 
} 

これはリスト・コンポーネントである：

const ItemList = ({ items, sortedItems }) => (
    <div> 
     {Object.keys(sortedItems).map(function(key) { 
      var id = sortedItems[key]; 

      return (
       <div key={id}> 
        {items[id].name} 
       </div> 
      ); 
     }, this)} 
    </div> 
); 

基本的に、これは動作しますが、キーワードが変更されるとすぐに、次のようなエラーが表示されます：

Uncaught Invariant Violation: findComponentRoot(..., .0.1.0.0.$123): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG-elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

Iはまた、すべての項目にわたってITEMLIST反復しながら、濾過項目は二番目の配列に保存されたバージョンを行い、IDを濾過で見つからない場合DIVにクラス名=「非表示」を割り当てますitems配列。これはエラーなく動作しますが、遅すぎます。

したがって、このようなリストをフィルタリングする正しいReact/Redux方法は何ですか？

Answer 1

私は何とか同じセットアップで、同じ問題を抱えていましたが、基本的には同じものでした。

新しい配列リファレンス（sortedItems）を返すと、不変的な違反が発生します。

代わりに同じ参照を保持し、それからすべてのアイテムを削除すると、push新しいものはリアクションが何も変更されていないことを知っています。