Sortiere ein Array von Objekten in React und rende sie

Question

Ich habe ein Array von Objekten mit einigen Informationen. Ich kann sie nicht in der von mir gewünschten Reihenfolge darstellen und brauche dafür Hilfe. Ich machen sie wie folgt aus:

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 diesem map() -function aufsteigend zu sortieren, oder muss ich sie sortieren, bevor ich Karte verwenden?

Answer 1

Dies könnte das sein, was 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... 

Verfahren sortwill mutate the original array. Daher erstelle ich ein neues Array mit der concat Methode.

Answer 2

Sie müssen Ihr Objekt vor dem Mapping über sie sortieren. Und es kann mit einer benutzerdefinierten Komparator Definition 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>))