在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 will mutate the original array。因此，我使用concat方法创建了一个新数组。

Answer 2

您需要先对对象进行排序，然后才能在它们上进行映射。并且可以使用带有自定义比较器定义的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 3

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 4

尝试lodash sortBy

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

阅读更多：lodash.sortBy