Safari在每个渲染上以不同顺序渲染数组元素

问题描述

我有以下代码：

Object.values(data).map((user) => {
  <div>
    <User key={user.id} user={user} />
  <div>
})

用户可以通过UI添加新用户，这些用户将被添加到data对象中，从而触发渲染。

除了Safari之外，它在所有浏览器（Chrome，Edge，IE）上都可以正常工作。 （13.1.2版） 在Safari上，几乎每次重新呈现该用户列表都会更改这些用户在UI中的显示顺序。

为什么会这样？

解决方法

没有JavaScript标准规定从对象获取键或值应该按特定顺序进行：

根据mdn Object.values

Object.values（）方法返回给定对象自己的可枚举属性值的数组，其顺序与for ... in循环提供的顺序相同

在for...in link之后，它说：

for ... in循环以任意顺序遍历对象的属性（有关为什么为什么至少在跨浏览器设置中不能依赖于看上去有序的迭代的更多信息，请参见delete运算符）。

之所以无法按特定顺序提供保证，是因为IE，但由于Safari是新的IE，因此它已经取代了不可预测的局面。

如果项目顺序很重要，则应将其存储在Set或Map数组中。