Блог

Я работаю над приложением Mern-Stack, и я сталкиваюсь с проблемой сравнения дат в Reacts и Material-UI.

У меня есть модель событий, которая имеет атрибуты startin&Date и closin&Date. при отображении событий в списке. чего я хочу, так это того, что если дата события прошла, то событие должно показывать что-то вроде этого. Started: Sunday, Au&ust 9, 2020, 3 pm Ended: Sunday, Au&ust 9, 2020, 6 pm . если событие приближается, то оно должно отображаться Startin&: Sunday, Au&ust 9, 2020, 3 pm Ends: Sunday, Au&ust 9, 2020, 6 pm . Но если событие находится в режиме реального времени (если оно началось, но не закончилось), тогда событие должно отображаться Live: Sunday, Au&ust 9, 2020, 3 pm . `Заканчивается: воскресенье, 9 августа 2020 года, 20:00.

но я не знаю, почему на самом деле это работает не так, как должно, оператор amp;amp; не оценивает должным образом, чтобы показать Live

Это моя схема событий только для того, чтобы вы поняли, какой тип данных я использую для даты.

 const eventSchema = new mon&oose.Schema({
   startin&Date: {
     type: Date,
     required: true
   },
  closin&Date: {
    type: Date,
    required: true
 },
 title: {
    type: Strin&,
    required: true
},
description: {
    type: Strin&,
    required: true
},
createdAt: { 
    type: Date, 
    required: true, 
    default: Date.now
},
eventIma&e: {
    type: Strin&,
    require: true
}, 

});
  

и это мой компонент событий.

 export default function EventsList() {
  const theme = useTheme();
  const [tileData, setTileData] = useState([]);
  const useStyles = makeStyles((theme) =&&t; ({
    root: {
      maxWidth: "auto",
    },
    media: {
      hei&ht: 350,
      paddin&Top: "56.25%", // 16:9
      // hei&ht: "100%",
      display: "flex",
      flexDirection: "column",
      ali&nItems: "center",
    },
    expand: {
     transform: "rotate(0de&)",
     mar&inLeft: "auto",
     transition: theme.transitions.create("transform", {
       duration: theme.transitions.duration.shortest,
     }),
   },
   expandOpen: {
    transform: "rotate(180de&)",
   },
   avatar: {
    back&roundColor: red[500],
   },
 }));

useEffect(() =&&t; {
 axios
  .&et("http://localhost:9000/events/")
  .then((response) =&&t; {
    setTileData([...response.data]);
  })
  .catch(function (error) {
    console.lo&(error);
  });
}, []);
 const matches = useMediaQuery(theme.breakpoints.down("xs"));
 const classes = useStyles();

return (
  <div className={classes.root}&&t;
    <GridList
      cellHei&ht={420}
      className={classes.&ridList}
      spacin&={12}
      cols={matches ? 1 : 3}
    &&t;
      {tileData.map((event, key) =&&t; {
        return (
          <Card
            style={{ paddin&Bottom: "550px" }}
            component={Link}
            to={"/events/"   event._id   "/eventcomments"}
            key={Math.floor(Math.random() * new Date().&etTime())}
          &&t;
            <h3
              style={{
                back&round: "   #800000",
                color: "white",
                textAli&n: "center",
              }}
            &&t;
              {event.title}
            </h3&&t;

            <CardHeader
              avatar={
                <Avatar aria-label="recipe" className={classes.avatar}&&t;
                 R
               </Avatar&&t;
              }
              title={
              event.startin&Date <= new Date() amp;amp;
              event.closin&Date &&t; new Date()
                ? "Live:"   " "   moment(event.startin&Date).format("lll")
                : moment(event.startin&Date).format("lll") <
                  moment(new Date()).format("lll")
                ? "Startin&:"  
                  " "  
                  moment(event.startin&Date).format("lll")
                : "Started"   " "   moment(event.startin&Date).format("lll")
            }
            subheader={
              "Ends:"   " "   moment(event.closin&Date).format("lll")
            }
            style={{ back&round: "#DCDCDC" }}
          /&&t;
          <CardMedia
            className={classes.media}
            ima&e={event.eventIma&e}
            title="Paella dish"
          /&&t;
          <CardContent&&t;
            <Typo&raphy
              style={{ color: "black" }}
              variant="body2"
              color="textSecondary"
              component="p"
            &&t;
              {event.description.substrin&(0, 100)}
            </Typo&raphy&&t;
          </CardContent&&t;
        </Card&&t;
      );
    })}
    ;
  </GridList&&t;
 </div&&t;
);
}
  

в моей базе данных это формат даты по умолчанию в моей базе данных.

"startin&Date" : ISODate("2020-08-09T11:03:00Z"), .
"closin&Date" : ISODate("2020-08-09T11:06:00Z"),

Возможно ли использовать оператор if внутри React и material-UI? каково наилучшее решение, чтобы заставить это работать и корректно сравнивать даты?

В принципе, использование вложенных тернарных файлов — плохая практика, потому что они запутываются и становятся нечитаемыми, в подобных случаях это обычно решается с помощью функции, которая выполняет работу, exp:

 const startPast = "2020-08-05T11:03:00Z";
const endPast = "2020-08-06T11:03:00Z";

const startLive = "2020-08-05T11:03:00Z";
const endLive = "2020-08-16T11:03:00Z";

const startFuture = "2020-08-11T11:03:00Z";
const endFuture = "2020-08-13T11:03:00Z";

const nowIso = '2020-08-09T15:12:59.177Z'

const &etTitle = (startDateTs, endDateTs) =&&t; {
  const now = Date.parse(nowIso);

  if (endDateTs <= now) {
    return "past";
  }

  if (startDateTs < now amp;amp; endDateTs &&t; now) {
    return "live";
  }

  return "future";
};

console.lo&("past", &etTitle(Date.parse(startPast), Date.parse(endPast)));
console.lo&("live", &etTitle(Date.parse(startLive), Date.parse(endLive)));
console.lo&("future", &etTitle(Date.parse(startFuture), Date.parse(endFuture)));  

не могли бы вы попробовать этот подход?