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

Question

我有一个包含某些信息的对象数组。我无法按照我想要的顺序渲染它们，我需要一些帮助。我使他们像这样：

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

是否有可能对它们进行排序在map() - 功能与item.timeM上升还是我以前我用图来对它们进行排序？

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

的方法sortwill 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>))