时间戳

首页 > 解决方案 > 如何在 React.js 中将日期与 tenary 和 && 运算符进行比较

node.js - 如何在 React.js 中将日期与 tenary 和 && 运算符进行比较

问题描述

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

我有一个具有startingDate 和closureDate 属性的事件模型。在列表中显示事件时。我想要的是，如果事件的日期已经过去，那么事件应该显示类似这样的内容。Started: Sunday, August 9, 2020, 3 pm Ended: Sunday, August 9, 2020, 6 pm. 如果活动即将到来，那么它应该显示Starting: Sunday, August 9, 2020, 3 pm Ends: Sunday, August 9, 2020, 6 pm。但是如果事件是实时的（如果它已经开始但还没有结束）那么事件应该显示Live: Sunday, August 9, 2020, 3 pm。`结束：2020 年 8 月 9 日，星期日，晚上 8 点。

但我不知道为什么它没有真正发挥应有的作用，&& 运算符没有按应有的方式进行评估以使其显示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 语句？什么是让它工作并使日期正确比较的最佳解决方案？

标签： node.jsreactjsmaterial-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 getTitle = (startDateTs, endDateTs) => {
  const now = Date.parse(nowIso);

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

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

  return "future";
};

console.log("past", getTitle(Date.parse(startPast), Date.parse(endPast)));
console.log("live", getTitle(Date.parse(startLive), Date.parse(endLive)));
console.log("future", getTitle(Date.parse(startFuture), Date.parse(endFuture)));

你能试试这种方法吗？

推荐阅读