我有一个Redux的Next.js项目。在我的商店里，有一个通过Redux reducers更新的状态数组。基本上是一个我经常使用的状态数组，跨越一些组件。
在我的一个reducer中，我对这个数组进行了排序。这个数组充满了对象，我通过一个特定的属性进行排序。当我console.log这个数组时，它似乎已经排序好了。
在我的一个组件中，我Map了这个排序的状态。我简化了这里的逻辑。

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编辑了状态，但我不知道为什么。
我知道这是一个广泛的错误，如果我的代码过于简化，我很乐意提供任何额外的上下文。答案将非常感谢，但任何有助于缩小问题所在的东西，将特别有用。