reactjs - Safari 在每次渲染时以不同的顺序渲染数组元素

Question

我有以下代码:

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

并且用户可以通过 UI 添加新用户，这些用户会被添加到 data对象，因此触发渲染。
它在除 Safari 之外的所有浏览器(Chrome、Edge、IE)上都运行良好。 (版本 13.1.2)
在 Safari 上，几乎每次重新渲染该用户列表都会更改这些用户在 UI 中的显示顺序。
为什么会这样？

Answer 1

没有 JavaScript 标准规定从对象中获取键或值应按特定顺序进行:
根据 mdn Object.values

The Object.values() method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop

并关注 for...in link它说:

A for...in loop iterates over the properties of an object in an arbitrary order (see the delete operator for more on why one cannot depend on the seeming orderliness of iteration, at least in a cross-browser setting).

不能以特定顺序保证它的原因是因为 IE 但由于 Safari 是新的 IE，它已经接管了不可预测性的火炬。
如果项目顺序很重要，您应该将它们存储在数组、Set 或 Map 中。