如何僅在 React 中的特定日期顯示提醒

Question

在一個組件中，我在左側有一個使用 react-calendar 的日歷。 我可以通過表格添加提醒，我可以在其中 select 約會。 這兩個日期顯示不同：react-calender 中的日期顯示格式為 18/08/2021，而提醒表單中的日期顯示為 2021-08-18。

我如何比較這兩個值，以便在單擊日歷日期時僅在特定日期顯示提醒？ 我嘗試解析（MDN 似乎不推薦）但是 output 數字不同。 我試圖與 valueOf() 進行比較，但 output 是錯誤的。

編輯：

我能夠比較這兩個日期，output 是真的。 因此，我設置了一個新的道具來提醒“顯示”與“假”的state。 但是當我嘗試在兩個日期相同時將此道具返回為真時，道具不會改變。 （使用開發工具手動更改它，顯示/隱藏 function 現在可以正常工作）。

在我的 index.js 文件中，我在單擊日歷中的特定日期時創建了一個 onChange function：

const onCalendarChange = (date) => {
    setDate(date);
    reminders.map((item) => {
      const itemDate = item.date
        .toLocaleString()
        .slice(0, 10)
        .replace(/\D/g, "");
      const calDate = date.toLocaleDateString().split("/").reverse().join("");
      console.log(itemDate === calDate);
      if (itemDate === calDate) {
        return {
          ...item,
          show: true,
        };
      }
      return item;
    });
  };

我也用 filter() 嘗試過，但這似乎也不起作用。 提醒會一直顯示。

 const onCalendarChange = (date) => {
    setDate(date);
    setReminders(
      reminders.filter(
        (item) =>
          item.date.toLocaleString().slice(0, 10).replace(/\D/g, "") ===
          date.toLocaleDateString().split("/").reverse().join("")
      )
    );
  };

Answer 1

1. 第一個代碼片段：

第一個代碼片段可能無法正常工作，因為您忘記將新數組存儲在變量中並使用它重置 state 上的reminders （您在第二個代碼片段中做對了）。

所以，第一個代碼片段應該是這樣的：

const updatedReminders = reminders.map((item) => {
      // logic here
});

setReminders(updatedReminders);

2. 第二個代碼片段：

不確定為什么這不起作用，但是。 當我有更新時，我會通知你。

同時，看看我對第一個代碼片段的建議是否有效？