使用 Material UI ProgressBar 反应倒计时

Question

我正在尝试实现一个功能，当用户按下锁定按钮时，项目的 isReserved 状态变为 true。完成后，将在 Firebase Firestore 中创建另外两个状态，startDate 和 expiryDate。 expiryDate 距离startDate 72 小时，应该映射到进度条。一旦进度值减少到 0，项目的 isReserved 状态在 firestore 中反转回 false。

firestore 文档有以下数据

reserveDB.doc(item.productID).set({
        productID: item.productID,
        image: item.image,
        price: item.price,
        productName: item.productName,
        isReserved: true,
        startDate: Date.now(), // time saved as timestamp
        expiryDate: event.setHours(72), // time saved as timestamp
      });

我尝试了在 YouTube 上找到的各种示例，但其中大多数都以天、小时、分钟和秒的格式实现倒计时。我也尝试过，但我的只显示剩余的天数和小时数。您可以在此链接查看我的其余尝试：https://stackblitz.com/edit/react-njnjwf?file=src/App.js

Answer 1

在您的 setHours 函数中，获取当前日期的小时数，然后加上 72。

  const newStartDate = new Date();

  const getExpiryDate = (date, hours) => {
    const expirationDate = new Date(date);
    expirationDate.setHours(expirationDate.getHours() + hours);
    return expirationDate;
  };

  reserveDB.doc(item.productID).set({
    productID: item.productID,
    image: item.image,
    price: item.price,
    productName: item.productName,
    isReserved: true,
    startDate: newStartDate,
    expiryDate: getExpiryDate(newStartDate, 72),
  });