React：数组顺序是完全随机的——什么决定了每个语法的数组顺序

Question

我完成了教程并看到了动态生成的数组列表项完全按预期工作的示例。出于某种原因，在我必须映射到这个特定数组列表的代码中，没有以任何可识别的顺序生成数组列表。

原因是...从我每次添加操作时看到的情况来看，键和索引以及其他参数都是 "adjusted" 即时...导致完全随机的事情。

***根据我的代码库更新了描述，使其更准确地反映发生的情况。我了解到我们正在使用 imuttable.js 更多信息在这里 https://facebook.github.io/immutable-js/ 并且因此在对象被映射之前发生了某些事情......

例如，我们在 this.props

中对 json 对象使用过滤器

写法如下：

const filteredConstant = jsonObjects.filter((jsonObject) => {
    return (jsonObject.status === status.APPROVED)
}

在 immutable 的文档中它说过滤器将执行以下操作

Seq({a:1,b:2,c:3,d:4}).filter(x => x % 2 === 0)
// Seq { b: 2, d: 4 }

从这里我们可以修改常量/变量，现在使用 map() 来映射对象。下面的代码在打开向 jsonObject2 的对象添加项目会产生随机结果的意义上不起作用。关键，即使我添加了一个索引，也没有关于顺序的押韵或理由......预期结果将是最旧的 - 最新的数据输入或升序。

filteredConstant.valueSeq().map((jsonObjectNew, //index) => {
   // code here 
   key={jsonObjectNew.id} //index={index} (//doesn't work either way)
}

显然 valueSeq() 没有影响。引入附加到唯一 ID 的时间戳也不起作用。

就像我之前说的那样，似乎每次都有一个新条目 "remaps"，因此会随机重新排序正在发生的事情。我可能正在解释密钥实际上是什么......我仍然没有弄清楚密钥是如何以及在何处理想地从服务器端生成的。但是，即使是 base64 的密钥，仍然必须按照基于字母和数字的某种顺序进行？我这样想错了吗？

唉，我能够创建一个修复程序，我将在下面分享。但对此有更多了解将不胜感激。

在 jsfiddle 中我无法重现这个问题，但是如果可以提供任何帮助来说明究竟是什么控制了数组顺序和/或进入对象的新数据会说操作对整体顺序的影响吗？

Answer 1

所以我能够进行修复，并且我必须掌握一些东西才能理解映射列表没有按任何类型的顺序排列。

答案在于我正在映射一个对象...它不是动态插入到的数组或映射对象...它只是一个对象，就所有意图和目的而言字典的字典。

根据示例，React 为他们提供了动态构建和数组，该数组具有每次插入的顺序...底部的新项目。这是该数组的样子。

[
    {
        "id": 1388534400000,
        "author": "Pete O'malley",
        "text": "Hey there!"
    },
    {
        "id": 1420070400000,
        "author": "Paul O’Shannessy",
        "text": "React is *great*!"
    },
    {
        "id": 1470769287060,
        "author": "Christian",
        "text": "how are you"
    }
] = JSON.stringify(this.props.data, null, 4)

等等...

我正在使用的对象根本不是这样的...它只是一个对象的对象。

这是一个包含 2 个条目的示例。

{
  "93b1keyId": {
    "xxxxx": "",
    "xxxxx": {
        "xxxx": "xxxx",
        "xxxxx": [
            {
                "xxx": "xxxx",
                "xxxxx": "xxxxx "
            }
        ],
        "xxxxx": "",
        "xxxxx": "",
        //code here
    },
    "Date": "2016-08-16",
    "xxxxxx": "xxxxxxxx",
    "timeCreated": "2016-08-16 17:49:39 pm -0400",
    "xxxxx": {
        "xxxxxx": "xxxxxx",
        "xxxxxxx": "xxxx"
    },
    "xxxxxx": xxxxxx,
    "id": "93b1KeyId",
    "xxxxxx": "xxxxx"
},
"ed79KeyId": {
    "xxxxx": "",
    "xxxxx": {
        "xxxx": "xxxx",
        "xxxxx": [
            {
                "xxx": "xxxx",
                "xxxxx": "xxxxx "
            }
        ],
        "xxxxx": "",
        "xxxxx": "",
        //code here
    },
    "Date": "2016-08-16",
    "xxxxxx": "xxxxxxxx",
    "xxxxx": {
        "xxxxxx": "xxxxxx",
        "xxxxxxx": "xxxx"
    },
    "xxxxxx": xxxxxx,
    "id": "ed79613e-d4bf-4fb4-993f-c212993d5d3b",
    "xxxxxx": "xxxxx"
  }
} = JSON.stringify(jsonObjectOriginal, null, 4)

如您所见，这不是一个数组...它只是一个字典的字典。对象中的对象。

根据此条目，我可以合理保证字典对象的顺序没有排序。

Stack question regarding property order

In particular see section 12.6.4 of the ECMAScript specification:

The mechanics and order of enumerating the properties ... is not specified.

&

4.3.3 Object

An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.

这种情况令人困惑的是，如果它映射的是无序对象，那么将 "mapping" 视为插入顺序的迭代有点误导。

根据 mozilla 他们的文档说明如下。

A Map object iterates its elements in insertion order — a for...of loop returns an array of [key, value] for each iteration.

同样，只有当您插入实际地图对象本身时……对我而言并非如此。

那么，答案...

我必须 重新排序 将显示的 React 函数映射到 UI 对象... 我使用了 sortBy，它是 map() 方法的不可变子方法。文档信息可以在这里找到：immutable sortBy method

{filteredConstant.sortBy(sortBy => sortBy.timeCreated).map((jsonObject2) => {  
    //code here

所以现在，新的映射对象根据插入时间正确重新排序并正确显示给 UI。我喜欢通过这个学习/工作！但我觉得 mozilla 或许应该更新该页面。

我通过研究 jsonObjectOriginal 和 jsonObjectNew 验证了我的 "theory"...原来是随机顺序的那个。

React：数组顺序是完全随机的——什么决定了每个语法的数组顺序

React: array order is completely random - what determines the array order per the syntax

javascript

arrays

reactjs

immutable.js