我正在开发Mern-Stack应用程序，我正面临着一个在Reacts和Material-UI中比较日期的挑战。

我有一个具有startingDate和closingDate属性的事件模型。 在列表上显示事件时。 我想要的是，如果事件的日期已经过去，那么事件应该显示这样的东西。 开始:2020年8月9日星期日下午3点结束:2020年8月9日星期日下午6点。 如果事件即将到来，则应显示开始:Sunday，8月9日，2020年8月9日，3pm结束:Sunday，8月9日，2020年8月9日，6pm。 但是如果事件是Live（如果它已经开始但还没有结束），那么事件应该显示Live:Sunday，August 9,2020年8月9日，3pm。 结束:2020年八月九日（星期日）晚上八时。

但我不知道为什么它没有真正发挥应有的作用，&；&； 运算符未按应有的方式进行求值，以使其显示live

这是我的事件模式，只是为了让您了解我在约会中使用的数据类型。

const eventSchema = new mongoose.Schema({
   startingDate: {
     type: Date,
     required: true
   },
  closingDate: {
    type: Date,
    required: true
 },
 title: {
    type: String,
    required: true
},
description: {
    type: String,
    required: true
},
createdAt: { 
    type: Date, 
    required: true, 
    default: Date.now
},
eventImage: {
    type: String,
    require: true
}, 

});

这是我的事件组件。

export default function EventsList() {
  const theme = useTheme();
  const [tileData, setTileData] = useState([]);
  const useStyles = makeStyles((theme) => ({
    root: {
      maxWidth: "auto",
    },
    media: {
      height: 350,
      paddingTop: "56.25%", // 16:9
      // height: "100%",
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
    },
    expand: {
     transform: "rotate(0deg)",
     marginLeft: "auto",
     transition: theme.transitions.create("transform", {
       duration: theme.transitions.duration.shortest,
     }),
   },
   expandOpen: {
    transform: "rotate(180deg)",
   },
   avatar: {
    backgroundColor: red[500],
   },
 }));

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

return (
  <div className={classes.root}>
    <GridList
      cellHeight={420}
      className={classes.gridList}
      spacing={12}
      cols={matches ? 1 : 3}
    >
      {tileData.map((event, key) => {
        return (
          <Card
            style={{ paddingBottom: "550px" }}
            component={Link}
            to={"/events/" + event._id + "/eventcomments"}
            key={Math.floor(Math.random() * new Date().getTime())}
          >
            <h3
              style={{
                background: "   #800000",
                color: "white",
                textAlign: "center",
              }}
            >
              {event.title}
            </h3>

            <CardHeader
              avatar={
                <Avatar aria-label="recipe" className={classes.avatar}>
                 R
               </Avatar>
              }
              title={
              event.startingDate <= new Date() &&
              event.closingDate > new Date()
                ? "Live:" + " " + moment(event.startingDate).format("lll")
                : moment(event.startingDate).format("lll") <
                  moment(new Date()).format("lll")
                ? "Starting:" +
                  " " +
                  moment(event.startingDate).format("lll")
                : "Started" + " " + moment(event.startingDate).format("lll")
            }
            subheader={
              "Ends:" + " " + moment(event.closingDate).format("lll")
            }
            style={{ background: "#DCDCDC" }}
          />
          <CardMedia
            className={classes.media}
            image={event.eventImage}
            title="Paella dish"
          />
          <CardContent>
            <Typography
              style={{ color: "black" }}
              variant="body2"
              color="textSecondary"
              component="p"
            >
              {event.description.substring(0, 100)}
            </Typography>
          </CardContent>
        </Card>
      );
    })}
    ;
  </GridList>
 </div>
);
}

在我的数据库中，这是我的数据库中的默认日期格式。

“startingdate”:ISODate（“2020-08-09t11:03:00z”），。 “ClosingDate”:ISODate（“2020-08-09T11:06:00Z”），

是否可以在React和Material-UI中使用if语句？ 什么是最好的解决方案，使这个工作和使日期比较正确？