类型错误：moment__WEBPACK_IMPORTED_MODULE_3___default(...)(...).calendar(...).sort 不是函数

Question

I fetch the data from this link .

I want to show the data based on a recent date. I used the map method to render the data then try to use sort them based on date. But I got an error. I used the moment package to making the date organized. Sorry for my English, I don't know if express my feeling right.

This is my React's component setup

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;

Screenshot below

Answer 1

Going by Moment's documentation on .calendar() here it returns a string: https://momentjs.com/docs/#/displaying/calendar-time/

Javascript strings do not have a .sort() function, so you're trying to call a function that doesn't exist which is causing your error.

You will want to sort the dates before converting them to strings, so you'll want to run sort on your events array before you do the map.

Solution edit:

So your response comes back and you have the events in state under events .

Before you render, you could reduce your events data down to just being dates, keyed using the ID of each event.

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;
}, {});

Then use Object.keys() to get an array (which can be sorted, objects can't.) of the keys. Then sort that array by accessing the values in eventDates, using the keys in the array, like so.

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

The keys will now be sorted by the start dates. ( By the way, to sort moment objects, you can just use the - operator on them ).

Now when you are rendering you want to map through the sortedByStartDate array, using the keys to access values in eventDates (you may also want to add additional information in here in the reduce to get access to, instead of just dates).

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