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

我有一个包含一些信息的对象数组。我无法按照我想要的顺序呈现它们，因此需要一些帮助。我是这样呈现它们的 

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

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

Fabian Picone
已编辑的问题 28日 二月 2018 в 8:24
编程
javascript reactjs
23日 四月 2017 в 2:33
2 种观点
解决办法

这可能就是你要找的东西：

// ... 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...

排序 "方法会改变原始数组 。因此，我使用 concat 方法创建了一个新数组。

评论(0)

您需要在映射对象之前对其进行排序。使用带有自定义比较器定义的 "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>))
评论(0)
 
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>
)
brooksrelyt
编辑本段答案5日 二月 2019 в 2:35
评论(0)