Как сортировать время и отображать сообщения в правильном порядке

здесь сообщения отображаются в неправильном порядке, сообщение отправителя how are you doing? должно быть внизу сообщения получателя hi heelo как отсортировать время? и вот код, пожалуйста, помогите мне заранее спасибо

       { newArr ? newArr.map((m) => {   
            return  <div className = {m.type === "sent" ? 'media media-chat media-chat-reverse' : 'media media-chat'}><p>{m.msg}</p>
            <p>{m.date}</p>
          </div>
          }) : null }

Вы не сказали, что такое date (число? Дата? Строка?). Если это число или дата, обратный вызов sort должен быть: .sort((a, b) => a.date - b.date) или от самого старого к самому новому (.sort((a, b) => b.date - a.date) от нового к самому старому). Если это строка, см. ответы на этот вопрос, но в основном: .sort((a, b) => a.date.localeCompare(b.date)) для лексикографической сортировки по возрастанию (обратные a и b в теле функции для сортировки по убыванию).

— 30.12.2020 11:23

reactjs

26.12.2020 09:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

592

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

{ newArr ? newArr.sort((a, b) => a.date > b.date ? 1 : -1).map((m) => {   
  return (
    <div className = {m.type === "sent" ? 'media media-chat media-chat-reverse' : 'media media-chat'}><p>{m.msg}</p>
      <p>{m.date}</p>
    </div>)
  }) : null }

Это не работает в случае, когда a.date и b.date совпадают правильно. В этом случае обратный вызов sort должен возвращать 0, а не -1.

— 30.12.2020 11:18

26.12.2020 09:23