React - Filtering gibt falsche Zeilen zurück

Question

Es macht mich verrückt. Ich habe eine Liste mit mehreren Einträgen erstellt. Ich habe eine Filterfunktion hinzugefügt, die gut zu funktionieren scheint. Ich habe die Anzahl der zurückgegebenen Ergebnisse überprüft, aber irgendwie zeigt es nur die Ergebnisnummer, die in der ersten Zeile beginnt.

Zur Erklärung:

Nehmen wir an, ich für „Zonen“ zu suchen und meine Filterfunktion gibt 4 Reihen mit ID 23, 25, 59 und 60, die Zeilen mit IDs 1,2,3 und 4 werden angezeigt. Was ich falsch mache !?

...  
render() { 
let filteredList = this.state.freights.filter((freight) => { 
    let search = this.state.search.toLowerCase(); 
    var values = Object.keys(freight).map(function(itm) { return freight[itm]; }); 
    var flag = false; 

    values.forEach((val) => { 
     if(val != undefined && typeof val === 'object') { 
      var objval = Object.keys(val).map(function(objitm) { return val[objitm]; }); 
      objval.forEach((objvalue) => { 
       if(objvalue != undefined && objvalue.toString().toLowerCase().indexOf(search) > -1) { 
        flag = true; 
        return; 
       } 
      }); 
     } 
     else { 
      if(val != undefined && val.toString().toLowerCase().indexOf(search) > -1) { 
       flag = true; 
       return; 
      } 
     } 
    }); 
    if(flag) 
     return freight; 
}); 
... 
<tbody> 
{ 
    filteredList.map((freight)=> { 
     return (
     <Freight freight={freight} onClick={this.handleFreightClick.bind(this)} key={freight.id} /> 
    ); 
    }) 
} 
</tbody> 
... 

UPDATE

freights geladen und über AJAX JSON Ergebnis gefüllt. Ein Ziel von freights sieht wie folgt aus:

Ich habe eine Textbox, wo ein Benutzer eine Suche durchführen können. Diese Suche sollte alle freight Objekte zurückgeben, deren Eigenschaften die Suchzeichenfolge enthalten.

Die filter ist so komplex, weil ich auch in Unterobjekten der Fracht suchen möchte. Vielleicht gibt es einen einfacheren Weg?

"Zones" war nur ein Beispiel für eine Suchzeichenfolge, nach der der Benutzer suchen kann.

Answer 1

Ich habe die Lösung gefunden, warum die "falschen" Frachteinträge angezeigt werden. Ich brauchte in freight Komponente die componentWillReceiveProps Methode hinzufügen:

componentWillReceiveProps(nextProps) { 
    if(nextProps.freight) { 
     this.setState({ 
      freight: nextProps.freight 
     }); 
    } 

} 

Dann alles hat gut funktioniert.

Answer 2

Jetzt, da Ihre Absichten klarer sind, empfehle ich diese viel weniger komplexe Lösung.

Zuerst können Sie ein rekursives Dienstprogramm fn schreiben, um alle Werte aller Schlüssel in einem n-tiefen Objekt zu erhalten. Wie dies zum Beispiel (ich lodash des Versorgers fn mit isObject dort):

const getAllValues = (obj) => { 
    return Object.keys(obj).reduce(function(a, b) { 
    const keyValue = obj[b]; 
    if (_.isObject(keyValue)){ 
     return a.concat(getAllValues(keyValue)); 
    } else { 
     return a.concat(keyValue); 
    } 
    }, []); 
} 

Nun, da Sie ein Array aller Werte des Objekts haben, macht es Ihre filter sehr einfach:

let filteredList = this.state.freights.filter((freightItem) => { 
    const allItemValues = getAllValues(freightItem); 
    return allItemValues.includes(this.state.search); 
}); 

That sollte es sein. Wenn etwas nicht funktioniert, gib mir einen Ruf.