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

Question

我有一组反应组件，我试图以特定顺序呈现。像这样的：

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