React状态未按正确顺序进行映射
我有一个使用 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 编辑状态造成的，但我不知道为什么。
据我所知，这是一个广泛的错误，如果我的代码过于简化，我很乐意提供任何额外的上下文。我们将不胜感激，但任何有助于缩小问题所在的答案都会特别有用。
