Uncaught Invariant Violation beim Filtern der Liste in React

Question

Ich erstellte eine Liste mit einem Suchformular, um die Liste nach Schlüsselwort in React.js mit Redux zu filtern.

Dies ist Teil der Controller-Komponente:

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

Dies ist der Filter:

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

Und dies ist die Liste Komponente:

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

Im Grunde ist dies funktioniert, aber Sobald das Schlüsselwort geändert wird, erhalte ich einen Fehler wie folgt:

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 ``.

Ich habe auch eine Version, in der die gefilterten Elemente in einem zweiten Array gespeichert werden, während ItemList iteriert über alle Elemente und ordnet classname = ‚verstecken‘ auf die div, wenn die ID nicht in der gefilterten gefunden Artikel-Array. Während dies ohne Fehler funktioniert, ist es viel zu langsam.

Also, was ist der richtige React/Redux Weg, um eine Liste wie diese zu filtern?

Answer 1

Ich lief irgendwie auf das gleiche Problem, mit einem anderen Setup, aber im Grunde das Gleiche.

Sieht aus, als ob Sie immer eine neue Array-Referenz (sortedItems) zurückgeben, erhalten Sie eine Invariant Violation.

Wenn Sie stattdessen die gleiche Referenz behalten und alle Elemente daraus entfernen dann push die neuen React weiß nichts geändert.