Reagieren/Redux Array mit Schlüsseln und Mapping

Question

ich eine API haben, die ursprünglich für jedes Objekt wie dieses ein Array von Objekten ohne Schlüssel zurückgegeben:

[ 
{ 
"id": 4311, 
"title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Polished) Handles", 
"liked": false 
}, 
{ 
"id": 2235, 
"title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Brushed) Handles", 
"liked": false 
} 
] 

aber es ist meine app viel helfen würde, wenn ich speichern könnte diese Daten mit der ID als Schlüssel für jedes verschachteltes Objekt habe ich aktualisiert meine API-Daten wie folgt zurück:

{ 
"2235": { 
"title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Brushed) Handles", 
"liked": false 
}, 
"4311": { 
"title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Polished) Handles", 
"liked": false 
} 
} 

aber jetzt bekomme ich einen Fehler von reagieren - ‚props.posts.map ist keine Funktion '

Ich kann nicht verstehen, was sich in den Daten geändert hat, redunt nicht jedem Objekt einen numerischen Schlüssel zu, wenn einer sowieso nicht gesetzt ist?

Answer 1

map soll mit Arrays arbeiten nur wie hier beschrieben https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Sie können jedoch lodash ‚s map Methode verwenden, die auch für die normalisierte Objekte funktioniert genauso wie bei Ihnen.

Als Beispiel können Sie verwenden:

const newArray = _.map(data, (item, key) => { 
    // key is the item's id 
    return item 
}) 

Wenn ein 3rd-Party-Modul ist keine Option, können Sie mit Object.keys arbeiten und das gleiche Ergebnis erhalten:

const newArray = Object.keys(data).map(key => data[key]) 

Answer 2

Für speichern Sie diese Daten mit der ID als Schlüssel für jedes verschachtelte Objekt, können Sie reduzieren:

arr.reduce(function(map, obj){ 
    map[obj.id] = { 
    title: obj.title, 
    liked: obj.liked 
} 
return map 
}, {})