Reactでオブジェクトの配列をソートしてレンダリングします

Question

私はいくつかの情報を含むオブジェクトの配列を持っています。私はそれらを私が望む順番でレンダリングすることができず、私はそれにいくつかの助けが必要です。私はこのようにそれらをレンダリング：

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

はそのmap() -functionまたは私はマップを使用する前にそれらをソートする必要がありますに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

オブジェクトをマッピングする前にオブジェクトをソートする必要があります。

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