我有一个使用 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 编辑状态造成的，但我不知道为什么。

据我所知，这是一个广泛的错误，如果我的代码过于简化，我很乐意提供任何额外的上下文。我们将不胜感激，但任何有助于缩小问题所在的答案都会特别有用。