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

问题描述

我有一个简单的PWA，它可以从WooCommerce API中获取数据。

我只想在一段时间（例如1小时前）中创建的新订单上显示一个标有“ NEW ORDER”的徽章。

我不确定如何实现这一目标。

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

以下是组件：

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;

isNewOrder()是我尝试创建的函数，但失败了。不确定如何实现。

解决方法

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

之所以无法按预期工作，是因为您正在比较moment().format()的输出，该输出需要一个矩对象并将其格式化为字符串。因此，您要比较的是字符串，而不是日期或时刻。

相反，您可以使用the difference API比较两个时刻if you still want to use moment。

所以您的函数可能看起来像这样：

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

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

请注意，一小时为3600000毫秒。因此，对于当前日期时间后一个小时或更短时间内创建的所有订单，这可以为您true。

javascript reactjs reactjs