Snippet

Unveränderliches Sortieren und Aufteilen von State-Listen mit Array toSorted

Das standardmäßige `Array.prototype.sort()` mutiert Arrays direkt an Ort und Stelle, was gegen die Unveränderlichkeitsregeln von React verstößt und Rendering-Fehler verursachen kann. Modernes JavaScript bietet `Array.prototype.toSorted()`, welches eine neue flache sortierte Kopie zurückgibt, ohne das ursprüngliche Prop-Array zu verändern. Die Kombination von `toSorted()` mit `Array.prototype.slice()` ermöglicht eine saubere, unmutierte Paginierungs- und Sortier-Pipeline direkt während des Renderns.

snippet.js

javascript

function ProductCatalog({ items, sortKey, pageIndex, pageSize }) {
  const sortedItems = items.toSorted((a, b) => {
    if (typeof a[sortKey] === 'string') {
      return a[sortKey].localeCompare(b[sortKey]);
    }
    return a[sortKey] - b[sortKey];
  });
 
  const startIndex = pageIndex * pageSize;
  const currentPageItems = sortedItems.slice(startIndex, startIndex + pageSize);
 
  return (
    <ul>
      {currentPageItems.map((product) => (
        <li key={product.id}>{product.title} - ${product.price}</li>
      ))}
    </ul>
  );
}

react

Erklärung

const sortedItems = items.toSorted((a, b) => {

Erstellt eine unveränderlich sortierte Kopie der Sammlung, ohne das übergebene Props-Array zu mutieren.

return a[sortKey].localeCompare(b[sortKey]);

Führt einen sprachsensitiven String-Vergleich für eine deterministische alphabetische Sortierung durch.

const currentPageItems = sortedItems.slice(startIndex, startIndex + pageSize);

Extrahiert die Teilmenge an Elementen, die für das aktuelle Paginierungsfenster benötigt wird.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Unveränderliches Sortieren und Aufteilen von State-Listen mit Array toSorted

Verwandt