Um eine Datenliste in ReactJS zu ordnen, können Sie die JavaScript-Funktionen `sort()` oder `localeCompare()` verwenden.
Die folgende Komponente demonstriert eine einfache Sortierung:
```jsx
import React from ‘react’;
class SortList extends React.Component { constructor(props) { super(props); this.state = { unsortedData: [‘Banane’, ‘Apfel’, ‘Kirsche’], sortedData: [] }; }
sortData = () => { let sortedData = this.state.unsortedData; sortedData.sort(); this.setState({ sortedData: sortedData }); } render() { return (export default SortList;
```
In diesem Code wird eine Funktion `sortData()` ausgelöst, wenn Sie auf eine Schaltfläche klicken. Die Funktion sortiert die Daten im `unsortedData`-Status mithilfe der `sort()`-Funktion und aktualisiert das `sortedData`-Status, damit die sortierte Liste gerendert werden kann.
Mit `localeCompare()` können Sie auch die Reihenfolge des Zeichenkettenvergleichs anpassen:
```jsx
//sort Data behandelt auch Groß- und Kleinschreibung und Sonderzeichen
sortData = () => {
let sortedData = this.state.unsortedData;
sortedData.sort((a, b) => a.localeCompare(b));
this.setState({ sortedData: sortedData });
}
```
Beachten Sie bitte, dass `sort()` bzw. `localeCompare()` die ursprüngliche Array ändert und Sie ggf. diese kopieren möchten, um die ursprüngliche Reihenfolge beibehalten (bspw. mit der `slice()` Methode).
Es ist auch wichtig zu erinnern, dass React immutability (Unveränderlichkeit) bevorzugt, also das Aktualisieren des Zustands, indem eine Kopie des früheren Zustands erstellt und verändert wird, anstatt den früheren Zustand direkt zu verändern.
