arrays - 我可以保证 React 组件数组的渲染顺序吗？

Question

我有一组 react 组件，我试图按特定顺序渲染。像这样的事情:

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

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

因此，如果打印 items 的 id 键，我会得到:

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() 函数返回一个对象，而不是另一个数组？对象将按键迭代顺序呈现，这不一定保证在浏览器之间保持一致。