Ein Array von Objekten in React sortieren und rendern

Ich habe eine Reihe von Objekten, die einige Informationen enthalten. Ich bin nicht in der Lage, sie in der Reihenfolge zu rendern, die ich will, und ich brauche etwas Hilfe dabei. Ich rendern sie wie folgt: 

this.state.data.map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)

Ist es möglich, sie mit item.timeM in dieser map()-Funktion aufsteigend zu sortieren, oder muss ich sie sortieren, bevor ich map verwende?

Fabian Picone
Bearbeitete Frage 28. Februar 2018 в 8:24
Programmierung
javascript reactjs
23. April 2017 в 2:33
1 Aufruf
Lösung

Dies könnte das sein, wonach Sie suchen:

// ... rest of code

// copy your state.data to a new array and sort it by itemM in ascending order
// and then map 
const myData = [].concat(this.state.data)
    .sort((a, b) => a.itemM > b.itemM)
    .map((item, i) => 
        <div key={i}> {item.matchID} {item.timeM}{item.description}</div>
    );

// render your data here...

Die Methode sort wird das ursprüngliche Array verändern . Daher erstelle ich ein neues Array mit der Methode concat.

Kommentare (0)

Sie müssen Ihr Objekt sortieren, bevor Sie es abbilden. Und das kann einfach mit einer sort() Funktion mit einer benutzerdefinierten Komparator-Definition gemacht werden wie

var obj = [...this.state.data];
obj.sort((a,b) => a.timeM - b.timeM);
obj.map((item, i) => (<div key={i}> {item.matchID}  
                      {item.timeM} {item.description}</div>))
Kommentare (0)
 
this.state.data.sort((a, b) => a.item.timeM > b.item.timeM).map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)
brooksrelyt
Bearbeitete Antwort 5. Februar 2019 в 2:35
Kommentare (0)