Reaktionszustände werden nicht in der richtigen Reihenfolge zugeordnet

Question

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.

Answer 1

我正在使用 Redux 减速器对数组进行排序。尽管控制台记录正确，但元素显示的顺序是错误的。虽然我仍然不知道为什么会发生这种情况，但解决方案是不对减速器中的内容进行排序。

在 Redux 中，您应该通过选择器而不是直接对内容进行排序通过在我的选择器中而不是直接在我的减速器中对事物进行排序，问题自行解决了。