React - Filter nach Objekteigenschaften

Question

Ich versuche, Objekt für Eigenschaft zu filtern, aber ich kann es nicht funktionieren lassen.

Daten in dem Objekt sind wie so strukturiert:

Ich bin Daten durch die UID zu holen und dann Abbilden alle Elemente aus dem Objekt, aber ich kann den Filter nicht funktioniert.

Render-Methode sieht so aus:

render() { 
 
    return(
 
     <div> 
 
     {Object.keys(this.state.dataGoal) 
 
      .filter(key => key.main == true) 
 
      .map((key, index) => { 
 
      return <div key={key}> 
 
        <h1>{this.state.dataGoal[key].name}</h1> 
 
        <p>{this.state.dataGoal[key].main}</p> 
 
        </div> 
 
      })} 
 
     </div>

Alle Ideen, was ich falsch mache?

Vielen Dank für jede Hilfe, Jakub

Answer 1

Object.keys gibt das keys dieses Objekts zurück, was bedeutet, dass es ein Array von Strings mit jedem Schlüssel in diesem Objekt zurückgibt.

obj = { 'a': 1, 'b': 2 }; 
Object.keys(obj); // ['a', 'b'] 

So den Wert dieser Eigenschaft zuzugreifen Sie darauf zugreifen müssen, um diesen Schlüssel verwenden, in Ihrem Fall wäre es so etwas wie dieses:

filter(key => this.state.dataGoal[key].main == true) 

Answer 2

Unter der Annahme, dass this.state.dataGoal das Objekt aus gebuchten Zielen Array ist, dann ist Ihr Filter falsch. Sollte sein:

{Object.keys(this.state.dataGoal) 
    .filter(key => this.state.dataGoal[key].main === true) 
    .map((key, index) => { 
    return <div key={key}> 
      <h1>{this.state.dataGoal[key].name}</h1> 
      <p>{this.state.dataGoal[key].main}</p> 
      </div> 
    })} 

Beachten Sie, dass jetzt ist es .filter(key => this.state.dataGoal[key].main === true) weil Schlüssel die Zeichenfolge, so etwas wie Khasdfasdfasdfasdfads ist und Sie wollen goal Objekt zuzugreifen, die von diesem Schlüssel, um seine main Eigenschaft zu überprüfen.