在React中对对象数组进行排序并渲染它们

Question

我有一个包含一些信息的对象数组.我无法按照我想要的顺序渲染它们,我需要一些帮助.我这样渲染它们:

this.state.data.map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)

是否可以使用item.timeM该map()函数对它们进行升序排序,还是在使用map之前必须对它们进行排序？

Answer 1

这可能是你正在寻找的:

// ... rest of code

// copy your state.data to a new array and sort it by itemM in ascending order
// and then map 
const myData = [].concat(this.state.data)
    .sort((a, b) => a.itemM > b.itemM)
    .map((item, i) => 
        <div key={i}> {item.matchID} {item.timeM}{item.description}</div>
    );

// render your data here...

该方法sort 将改变原始数组.因此,我使用该concat方法创建一个新数组.

Answer 2

const list = [
  { qty: 10, size: 'XXL' },
  { qty: 2, size: 'XL' },
  { qty: 8, size: 'M' }
]

list.sort((a, b) => (a.qty > b.qty) ? 1 : -1)

console.log(list)

输出 ：

[
  {
    "qty": 2,
    "size": "XL"
  },
  {
    "qty": 8,
    "size": "M"
  },
  {
    "qty": 10,
    "size": "XXL"
  }
]

Answer 3

在映射对象之前,您需要对对象进行排序.sort()使用具有自定义比较器定义的函数可以轻松完成

var obj = [...this.state.data];
obj.sort((a,b) => a.timeM - b.timeM);
obj.map((item, i) => (<div key={i}> {item.matchID}  
                      {item.timeM} {item.description}</div>))

Answer 4

this.state.data.sort((a, b) => a.item.timeM > b.item.timeM).map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)

Answer 5

this.state.data.sort((a, b) => a.objKey > b.objKey ? 1:-1).map((objKey, index))

Answer 6

尝试 lodash sortBy

import * as _ from "lodash";
_.sortBy(data.applications,"id").map(application => (
    console.log("application")
    )
)

阅读更多：lodash.sortBy