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 中）。

所以如果打印项目的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

您可以在映射和渲染之前定义一个排序数组。

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

comparefunction = (s1,s2) => {
   if(s1.propToSortBy > s2.propToSortBy)   //assuming each element is an object
       return 1;
   if(s1.propToSortBy > s2.propToSortBy) 
       return -1;
   
    return 0;
}

请详细说明stock 数组的外观，以便我们更好地理解。