React狀態未以正確順序進行映射

Question

我有一個使用 Redux 的 Next.js 專案。在我的商店中，有一組透過 Redux 減速機更新的狀態。基本上是我在某些元件中經常使用的狀態數組。

在我的一個減速器中，我對這個陣列進行了排序。該數組充滿了對象，我透過特定屬性對其進行排序。當我 console.log 陣列時，它似乎已經排序良好。

在我的一個元件中，我映射了這種排序狀態。我在這裡簡化了邏輯。

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

當 HTML 顯示時，所有元素的順序都不正確。最後幾十個 div 元素似乎是有序的，但前十幾個元素似乎是隨機的。

例如，這是陣列。

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

排序後，控制台日誌記錄將傳回預期結果。這是排序函數。

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

產生的 HTML 應該如下所示。

相反，結果由於某種原因而混亂。我懷疑這是由於 Redux 編輯狀態造成的，但我不知道為什麼。

據我所知，這是一個廣泛的錯誤，如果我的程式碼過於簡化，我很樂意提供任何額外的上下文。我們將不勝感激，但任何有助於縮小問題所在的答案都會特別有用。

Answer 1

我正在使用 Redux 減速機對陣列進行排序。儘管控制台記錄正確，但元素顯示的順序是錯誤的。雖然我仍然不知道為什麼會發生這種情況，但解決方案是不對減速器中的內容進行排序。

在 Redux 中，您應該透過選擇器而不是直接對內容進行排序透過在我的選擇器中而不是直接在我的減速器中對事物進行排序，問題自行解決了。