Сортировка массива объектов по реакции по времени и дате создания

Question

Я новичок в react js and redux. Здесь, что у меня есть, массив объектов, который похож на

quizList = [ { createdDate : 1543314832505, id:5bfd1d90d4ed830001f589fc, name:'abc'}, { createdDate : 1543314152180, id:5bfd1ae8d4ed830001f589f8, name:'pqr'}, { createdDate : 1543308600920, id:5bfd1d90d4ed830001f589ssq, name:'qqq'} ]

Теперь то, что я делаю, это

<div className="col p-0">
   <div id="accordion">
      {
      props.quizList.map((data, index) => ( 
      <QuizInCollapse index={index + 1} data={data}/>
      ))
      }
      {/* first collapse end */}
   </div>
</div>

Теперь, здесь я передаю один за другим объект, используя is, map.Теперь, вот, что я пытался сделать, это:

Я хочу показать этот список в соответствии с созданной датой и временем, так что последний будет наверху.

так, здесь createdDateэто ключ, который означает, что у него есть метка времени.

, поэтому я взял у него дату, например

    let currentDate = new Date(props.quizList.createdDate);
    let createdDate =  currentDate.toDateString();
    let createdTime = currentDate.toLocaleTimeString();

Но после этого?Я теперь кто-нибудь. Как я могу отсортировать это?

ТАК, кто-нибудь может мне помочь с этим?

Answer 1

Так же, как Array.map (), вы можете использовать Array.sort () .Array.sort () принимает функцию обратного вызова (как и .map) с 2 аргументами (a и b), которые вы можете использовать для сравнения.Возвращаемое значение функции сравнения может быть:

• -1, a меньше, чем b
• 0, a = b
• 1, a больше, чем b

Вот пример.

function compareDatesInObjects(a, b) {
    const aCreatedDate = new Date(a.createdDate);
    const bCreatedDate = new Date(b.createdDate);
    if (aCreatedDate < bCreatedDate)
        return -1;
    if (aCreatedDate > bCreatedDate)
        return 1;
    return 0;
}

const sorted = quizList.sort(compareDatesInObjects);
// and because sort() returns an array, you can even chain the Array functions.
const mappedAndSorted = quizList.sort(compareDatesInObjects).map(/* ... */);

Answer 2

Вы можете использовать метод Array.sort для сортировки массива и рендеринга отсортированного массива, используя map.Операция сортировки не должна выполняться в методе render(), она должна выполняться в componentDidMount или getDerivedStateFromProps, отсортированный массив должен храниться в состоянии компонента, и вы должны использовать переменную состояния для отображения массива в render()способ.

Answer 3

Вам нужно отсортировать массив перед отображением, и вот как вы это делаете.Вам не нужно преобразовывать его в объект Date, потому что сортировка миллисекунд эпохи - это простая и быстрая математика.

Если вы хотите изменить порядок, используйте smallestToBiggest.

var quizList = [ 
  {createdDate : 1543314832505, id: '5bfd1d90d4ed830001f589fc', name:'abc'}, 
  {createdDate : 1543314152180, id: '5bfd1ae8d4ed830001f589f8', name:'pqr'}, 
  {createdDate : 1543308600920, id: '5bfd1d90d4ed830001f589ssq', name:'qqq'}
];

function smallestToBiggest(a, b) {
  return a.createdDate - b.createdDate;
}

function biggestToSmallest(a, b) {
  return b.createdDate - a.createdDate;
}

quizList.sort(biggestToSmallest);

// now you can map quizList
// it's already sorted
console.log(quizList);

Ссылка: Array.sort

---

Редактировать

Вы используете его так:

render() {
  const sortedList = props.quizList.sort((a, b) => b.createdDate - a.createdDate);

  return (
    <div className="col p-0">
      <div id="accordion">
        {sortedList.map((data, index) => (
          <QuizInCollapse
            index={index + 1}
            data={data}
          />
        ))}
      </div>
    </div>
  );
}