いくつかの情報を含むオブジェクトの配列があります。それらを希望の順序でレンダリングすることができないので、助けてほしいのです。私は次のようにレンダリングしています。
this.state.data.map(
(item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)
map()関数の中でitem.timeM
を使って昇順にソートすることは可能でしょうか、それともmapを使う前にソートしなければならないのでしょうか?
これは、あなたが探しているものかもしれません。
// ... 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
は 元の配列を変異させます 。そこで、concat
メソッドを使って新しい配列を作ります。
オブジェクトをマッピングする前に、オブジェクトをソートする必要があります。これは、次のようなカスタムコンパレータを定義した 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>
)