Ошибка типа: moment__WEBPACK_IMPORTED_MODULE_3 ___ default (...) (...). Calendar (...). Sort не является функцией

Question

Я получаю данные от по этой ссылке .

Я хочу показать данные, основанные на недавней дате. Я использовал метод карты для рендеринга данных, а затем попытался использовать их сортировку по дате. Но я получил ошибку. Я использовал пакет момента для организации даты. Извините за мой Engli sh, я не знаю, если express я чувствую себя хорошо.

Это настройка компонента моего React

import React, { useEffect, useState } from "react";
import axios from "axios";
import moment from "moment";


const Events = () => {
  const [events, setEvents] = useState([]);

  useEffect(() => {
    fetchingData();
  }, []);

  const fetchingData = () => {
    axios
      .get("/events")
      .then(response => {
        console.log("response", response);
        setEvents(response.data.data);
      }) 
      .catch(err => console.log(err));
  };

  //do console.log
  console.log("events", events);

  return (
    <div>
      {events.map(list => {
        return (
          <div>
            <div className="card">
              <div className="carddd">
                <div className="card_image">
                  <ul>
                    <li>
                      {moment(list.event_dates.starting_day.toString())
                        .calendar()
                        .sort((a, b) => { // I try sort date in here.
                          return a - b;
                        })}
                    </li>
                  </ul>

                  <div>
                    {list.description.images.map(img => {
                      return (
                        <img
                          src={img.url}
                          alt="jj"
                          style={{ width: "250px", height: "250px" }}
                        />
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default Events;

Скриншот ниже

Answer 1

В соответствии с документацией Момента по .calendar() здесь возвращается строка: https://momentjs.com/docs/# / displaying / calendar-time /

Javascript строки не имеют .sort ( ), поэтому вы пытаетесь вызвать функцию, которая не существует, что вызывает вашу ошибку.

Вы захотите отсортировать даты перед преобразованием их в строки, поэтому вам нужно будет выполнить сортировку в вашем массиве events перед созданием карты.

Редактирование решения:

Таким образом, ваш ответ возвращается, и у вас есть события в состоянии под events.

Перед рендерингом вы могли бы уменьшить данные о ваших событиях до даты, указав идентификатор каждого события.

const eventDates = events.reduce((acc, event) => {
    acc[event.id] = {
        startDate: moment(event.event_dates.starting_day),
        endDate: moment(event.event_dates.ending_day),
        // You could also add more info in here, like the name or location.
    }
    return acc;
}, {});

Затем используйте Object.keys () , чтобы получить массив (который можно отсортировать, объекты не могут.) Ключей. Затем отсортируйте этот массив, обратившись к значениям в eventDates, используя ключи в массиве, например, так:

let sortedByStartDate = Object.keys(eventDates);
sortedByStartDate.sort(
    (a, b) => eventDates[a].startDate - eventDates[b].startDate
);

Теперь ключи будут отсортированы по датам начала. ( Кстати, чтобы отсортировать моментные объекты, вы можете просто использовать оператор - на них ).

Теперь, когда вы выполняете рендеринг, вы хотите отобразить массив sortedByStartDate, используя ключи для доступа к значениям в eventDates (вы также можете добавить сюда дополнительную информацию, чтобы получить доступ вместо просто дат).

sortedByStartDate.map(
    eventKey => <li>{eventDates[eventKey].startDate.calendar()}</li>
);