Сортировка массива объектов в React и рендеринг

У меня есть массив объектов, содержащих некоторую информацию. Я не могу сделать их в том порядке, в котором я хочу, и мне нужна помощь. Я делаю их следующим образом:

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

Можно ли отсортировать их по возрастанию с помощью item.timeM в этой map() -функции или мне нужно отсортировать их до использования карты?

Ответы

Ответ 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...

Метод sort будет мутировать исходный массив. Поэтому я создаю новый массив, используя метод concat.

Ответ 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>))

Ответ 3

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

Ответ 4

Попробуйте lodash sortBy

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

Подробнее: lodash.sortBy