Ich habe ein Next.js-Projekt, das Redux verwendet. In meinem Shop habe ich eine Reihe von Zuständen, die über einen Redux-Reduzierer aktualisiert werden. Im Grunde ein Zustandsarray, das ich in einigen Komponenten häufig verwende.

In einem meiner Reduzierer sortiere ich dieses Array. Das Array wird mit Objekten gefüllt und ich sortiere sie nach bestimmten Eigenschaften. Wenn ich mir das Array anschaue, scheint es gut sortiert zu sein. console.log

In einer meiner Komponenten habe ich diesen Sortierzustand abgebildet. Ich habe die Logik hier vereinfacht.

names.map((p) => (
    <div key={p.name}>
      {p.firstname} {p.lastname}
    </div>
  ));

Bei der Anzeige des HTML sind nicht alle Elemente in der richtigen Reihenfolge. Die letzten paar Dutzend

Elemente scheinen geordnet zu sein, aber das erste Dutzend scheint zufällig zu sein. div

Zum Beispiel ist dies ein Array.

let names = [
    {
      "firstname": "Michael",
      "lastname": "Scott",
    },
    {
      "firstname": "Jim",
      "lastname": "Halpert",
    },
    {
      "firstname": "Dwight",
      "lastname": "Schrute",
    },
    {
      "firstname": "Pam",
      "lastname": "Beesly",
    },
    {
      "firstname": "Ryan",
      "lastname": "Howard",
    }
  ]

Nach der Sortierung liefert die Konsolenprotokollierung die erwarteten Ergebnisse. Dies ist die Sortierfunktion.

names = names.sort((a, b) => a.firstname.localeCompare(b.firstname))

Der generierte HTML-Code sollte wie folgt aussehen.

Stattdessen sind die Ergebnisse aus irgendeinem Grund durcheinander. Ich vermute, dass das am Redux-Bearbeitungsstatus liegt, aber ich weiß nicht, warum.

Soweit ich weiß, handelt es sich um einen weit verbreiteten Fehler und ich stelle gerne zusätzlichen Kontext zur Verfügung, wenn mein Code zu stark vereinfacht ist. Für Antworten wäre ich sehr dankbar, besonders hilfreich wären jedoch Antworten, die dabei helfen, das Problem einzugrenzen.