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，它已经接管了不可预测性的 torch 。

如果项目顺序很重要，您应该将它们存储在数组、Set 或 Map 中。