如何解决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数组中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。