Javascript 如何使用ReactJS在新订单上显示徽章？

我有一个简单的PWA，它从WooCommerceAPI获取数据

我只想在一段时间内（例如1小时前）创建的新订单上显示一个徽章，上面写着“新订单”

我不知道如何做到这一点

if (moment(todayDate).format("LT") > moment(orderCreatedDate).format("LT")) {
      return true;
    } else {
      return false;
    }

我试图创建一个函数，将当前日期与创建订单的日期进行比较，但我仍然感到困惑

以下是组件：

import React from "react";
import { Link } from "react-router-dom";
import moment from "moment";
import "moment/locale/es";
import { Icon, Badge } from "rsuite";

function statusString(status) {
  const lookup = {
    processing: "En proceso",
    "on-hold": "En espera",
    completed: "Completado",
    cancelled: "Cancelado",
    refunded: "Reembolsado",
  };
  return lookup[status];
}

const Order = ({ order }) => {
  const isNewOrder = (orderCreatedDate) => {
    const todayDate = new Date();

    if (moment(todayDate).format("LT") > moment(orderCreatedDate).format("LT")) {
      return true;
    } else {
      return false;
    }
  };

  return (
    <Link className="order-link" to={"/orders/" + order.id}>
      <div className="order-item">
        <Badge content="NEW"></Badge>
        <h2>
          #{order.id} - {order.billing.first_name} {order.billing.last_name}
        </h2>
        <h3>
          {" "}
          <Icon icon="line-chart" size="2x" /> {statusString(order.status)}
        </h3>
        <h3>
          <Icon icon="calendar" size="2x" />{" "}
          {moment(order.date_created).startOf("hour").fromNow()}
        </h3>
      </div>
    </Link>
  );
};

export default Order;

从“React”导入React；
从“react router dom”导入{Link}；
从“时刻”中导入时刻；
导入“时刻/地点/es”；
从“rsuite”导入{Icon，Badge}；
函数状态字符串（状态）{
常量查找={
处理：“En proceso”，
“暂停”：“En espera”，
已完成：“Completado”，
取消：“取消”，
退款：“Reembolsado”，
};
返回查找[状态]；
}
常量顺序=（{Order}）=>{
常量isNewOrder=（orderCreatedDate）=>{
const todayDate=新日期（）；
if（矩（今日日期）.format（“LT”）>矩（orderCreatedDate）.format（“LT”））{
返回true；
}否则{
返回false；
}
};
返回(
#{order.id}-{order.billing.first_name}{order.billing.last_name}
{" "}
{statusString（order.status）}
{" "}
{时刻（order.date_created）.startOf（“hour”）.fromNow（）}
);
};
导出默认订单；

isNewOrder（）

是我试图创建的函数，但失败了。不知道如何实现这一点

if (moment(todayDate).format("LT") > moment(orderCreatedDate).format("LT")) {
      return true;
    } else {
      return false;
    }

之所以不能按预期工作，是因为您正在比较

moment（）.format（）

的输出，它获取一个矩对象并将其格式化为字符串。所以你是在比较字符串，而不是日期或时刻

相反，您可以使用来比较这两个时刻

因此，您的函数可能看起来像：

const isNewOrder = (orderCreatedDate) => {
    const todayDate = new Date();

    if (moment(todayDate).diff(moment(orderCreatedDate))/3600000 <=   1) {
      return true;
    } else {
      return false;
    }
  };

const isNewOrder=（orderCreatedDate）=>{
const todayDate=新日期（）；
if（时刻（今日日期）.diff（时刻（orderCreatedDate））/3600000