我可以保证React组件数组的呈现顺序吗？

Question

我有一系列反应组件,我试图按特定顺序渲染.像这样的东西:

render: function() {
  var items = stock.map(function(item) {
    return <NewLI data={item} key={item.id}/>
  }
  return <ul>{items}</ul>
}

我的问题是React没有以原始数组的顺序返回li(实际组件比单个组件更复杂li,但是它被正确地包装在a中div).

所以,如果打印id键items,我得到这个:

items.forEach(function(a) { console.log(a.id) })
> 1
> 2
> 3
> 4

但我的React渲染看起来像这样:

<ul>
  <li...>2</li>
  <li...>3</li>
  <li...>4</li>
  <li...>1</li>
</ul>

这是预期的行为吗？有没有办法保证订单？

Answer 1

这不是预期的行为.React总是按元素的顺序呈现数组.

如果存在具有冲突key值的项目,则仅渲染最新元素,但这不是这里的情况,因为渲染了所有四个元素.

有可能是.map()返回对象而不是另一个数组的自定义函数吗？对象将以密钥迭代顺序呈现,这不一定保证跨浏览器一致.