Sortiere ein Array von Objekten in React und rendere sie

Lesezeit: 3 Minuten

Sortiere ein Array von Objekten in React und rendere sie
KimR

Ich habe ein Array von Objekten, die einige Informationen enthalten. Ich kann sie nicht in der gewünschten Reihenfolge rendern und brauche dabei etwas Hilfe. Ich übertrage sie so:

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

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

  • Sie müssen sie VOR der Verwendung sortieren map Methode.

    – Ön44

    23. April 2017 um 14:35 Uhr

  • @ Oen44 hat Recht. Beachten Sie jedoch, dass die Logik und die Funktionen (Map & Sort) nicht React-spezifisch sind, sondern normale JS-Konstrukte!

    – Gonzofisch

    23. April 2017 um 14:52 Uhr

1647156306 126 Sortiere ein Array von Objekten in React und rendere sie
Mu.

Das 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 ? 1 : -1)
    .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 mutieren . Daher erstelle ich ein neues Array mit der concat Methode. Die Sortierung auf dem Feld itemM sollte mit sortierbaren Entitäten wie Zeichenfolgen und Zahlen funktionieren.

  • Ich denke .sort((a, b) => a.itemM > b.itemM) ist hier falsch (das hat mich wirklich umgehauen …). Es sollte sein .sort((a, b) => a.itemM - b.itemM) wenn itemM sind Zahlen, oder?

    – Bret Royster

    5. Mai 2020 um 23:05 Uhr

  • Wenn itemM keine Zahlen, es muss eher so sein: .sort((a, b) => a.item.timeM > b.item.timeM ? 1:-1)

    – Bret Royster

    5. Mai 2020 um 23:13 Uhr

  • gute Antwort. Es lohnt sich auch, sich dessen bewusst zu sein .localeCompare()zum Beispiel b.item.timeM.localeCompare(b.item.timeM)

    – ErichBSchulz

    21. September 2021 um 13:22 Uhr

Sie müssen Ihr Objekt sortieren, bevor Sie es überschreiben. Und das geht ganz einfach mit a sort() Funktion mit einer benutzerdefinierten Komparatordefinition 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>))

Sortiere ein Array von Objekten in React und rendere sie
Vincenzo Centofanti

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>
)

Probieren Sie lodash sortBy aus

import * as _ from "lodash";
_.sortBy(data.applications,"id").map(application => (
    console.log("application")
    )
)

Weiterlesen : lodash.sortBy

const list = [
  { qty: 10, size: 'XXL' },
  { qty: 2, size: 'XL' },
  { qty: 8, size: 'M' }
]

list.sort((a, b) => (a.qty > b.qty) ? 1 : -1)

console.log(list)

Ausgang :

[
  {
    "qty": 2,
    "size": "XL"
  },
  {
    "qty": 8,
    "size": "M"
  },
  {
    "qty": 10,
    "size": "XXL"
  }
]

  • Dies hat nichts mit React zu tun, wie in der Frage gestellt.

    – Jamie

    1. Dezember 2021 um 11:57 Uhr

1647156307 130 Sortiere ein Array von Objekten in React und rendere sie
Praveen Prav

Der Chrome-Browser betrachtet einen ganzzahligen Wert als Rückgabetyp, nicht einen booleschen Wert, also

this.state.data.sort((a, b) => a.item.timeM > b.item.timeM ? 1:-1).map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)

  • Dies hat nichts mit React zu tun, wie in der Frage gestellt.

    – Jamie

    1. Dezember 2021 um 11:57 Uhr

1647156308 410 Sortiere ein Array von Objekten in React und rendere sie
Mayur

this.state.data.sort((a, b) => a.objKey > b.objKey ? 1:-1).map((objKey, index))

996390cookie-checkSortiere ein Array von Objekten in React und rendere sie

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy