종 개체 배열에 반응하고 그들을 렌더링

나의 배열체를 포함하는 몇 가지 정보를 제공합니다. 할 수 없게 렌더링하기 위해 나가고 싶고 도움이 필요합니다. 나는 그들을 렌더링이:

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

이 가능한 정렬이 그들을 오름차순과 함께항목입니다.timem 에에서는지도()기능을 하거나 내가 그들을 정렬하기 전에 나는 사용할까요?

질문에 대한 의견 (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...

방법은종류이 변형되는 원래 array. 따라서 내가 만드는 새로운 배열을 사용하여concat방법입니다.

해설 (0)

해야 합니다 종류의 개체하기 전에 매핑됩니다. 고 그것을 쉽게 할 수 있으로정렬()기능으로 사용자 지정 비교 측정기 정의는 다음과 같

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>
)
해설 (0)

Try lodash sortBy

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

자세히보기:lodash.sortBy

해설 (0)