我有一个包含一些信息的对象数组。我无法按照我想要的顺序渲染它们，我需要一些帮助。我这样渲染它们：
this.state.data.map(
(item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)
是否可以item.timeM在该map()函数中对它们进行升序排序，还是必须在使用 map 之前对它们进行排序？
在 React 中对对象数组进行排序并渲染它们
IT技术
javascript
reactjs
2021-02-25 03:43:15
6个回答
这可能是您要找的：
// ... 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 ? 1 : -1)
.map((item, i) =>
<div key={i}> {item.matchID} {item.timeM}{item.description}</div>
);
// render your data here...
该方法sort 将改变原始数组。因此，我使用该concat方法创建了一个新数组。字段itemM上的排序应该适用于可排序的实体，如字符串和数字。
在映射对象之前，您需要对它们进行排序。并且可以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>))
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>
)
尝试 lodash sortBy
import * as _ from "lodash";
_.sortBy(data.applications,"id").map(application => (
console.log("application")
)
)
阅读更多：lodash.sortBy
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"
}
]