React-Redux: Filtern eines Arrays von Objekten aus dem Zustand, ob ihre Eigenschaften anderen Arrays aus dem Zustand

Question

Ich habe eine verbundene React-Komponente, die ein Array von Plot-Objekten aus dem Status erhält.

Es erhält auch mehrere Arrays von Strings aus Zustand. Wie folgt aus:

function mapStateToProps(state) { 
    return { 
     plots: state.plots.plots, 
     varietyFilter: state.plots.varietyFilter, 
     regionFilter: state.plots.regionFilter, 
     growerFilter: state.plots.growerFilter, 
     plotNameFilter: state.plots.plotNameFilter 
    }; 
} 

sieht Jedes Grundstück etwas wie folgt aus:

{ name, variety, region, grower} 

... mit jeder Eigenschaft eine Zeichenfolge sein.

Ich möchte die Plots filtern, ob die entsprechenden Eigenschaften in diesen Filter-Arrays sind.

Die Standardlösung ist

so etwas wie

const filteredArray = inputArray.filter(a => filterArray.indexOf(a.property) 

verwenden Es gibt drei Probleme, die ich mit diesem Ansatz haben. Erstens, wenn das Filterarray leer ist, werden keine Elemente des gefilterten Arrays passieren, während ich möchte, dass sie alle passieren. Zweitens, was passiert, wenn diese Filter-Arrays, die aus dem Status angezeigt werden, noch nicht initialisiert wurden? Es wird einen Fehler geben, da indexOf nicht verfügbar ist. Drittens möchte ich diese Filtermethoden verketten, aber nur diejenigen ketten, die eine Art Filter-Array initialisiert haben.

Bisher habe ich mit diesem kommen:

if (this.props.plots) { 
      filteredProps = this.props.plots.filter(function(plot) { 
       if (!varietyFilter.indexOf) { 
        return true; 
       } 
       return varietyFilter.indexOf(plot.variety) > -1; 
      }); 
     } 

Das ist nur durch, wenn auch alles zu passieren scheint. Wenn ich die erste Rückgabeanweisung lösche, erhalte ich einen Fehler - die Methode indexOf ist nicht vorhanden, wenn die Komponente zuerst initialisiert wird.

Also, zwei Fragen. Erstens, wie filtere ich ein Array von Objekten dafür, ob eine gegebene Eigenschaft jedes Objekts in einem Array von Strings enthalten ist, die im Zustand existieren können oder nicht? Zweitens, wie mache ich das für eine Reihe von Arrays, die jeweils einer anderen Eigenschaft der Objekte im ursprünglichen Array entsprechen?

Answer 1

zu lassen, um alle Elemente passieren, wenn filterArray ein leeres Array ist und Fehler zu vermeiden, wenn es null oder nicht definiert ist, können Sie tun:

const filteredArray = inputArray.filter(a => (filterArray || []).length === 0 || filterArray.includes(a.property)); 

Der Code unten ein leeres Array als Standardwert von filterArray gesetzt in Fall ist es null oder nicht definiert:

filterArray || [] 

und der Teil unterhalb tun, um die Filterung, wenn Arraylänge positiv ist:

|| filterArray.includes(a.property) 

Diese Codes sind Äquivalente:

var filters = [ 
    { prop: 'prop1', filterArray: ['abc', 'def'] }, 
    { prop: 'prop2', filterArray: ['abc'] }, 
    { prop: 'prop3', filterArray: ['abc', 'cde'] } 
]; 

var filteredArray = [...inputArray]; // Copy inputArray 

filters.forEach(filterObj => { 
    filteredArray= filteredArray.filter(a => (filterObj.filterArray || []).length === 0 || filterObj.filterArray.includes(a[filterObj.prop])); 
});