如何仅在 React 中的特定日期显示提醒

Question

在一个组件中，我在左侧有一个使用 react-calendar 的日历。我可以通过可以选择日期的表单添加提醒。这两个日期的显示方式不同：react-calender 中的日期显示为 18/08/2021 格式，而提醒表单中的日期显示为 2021-08-18。

如何比较这两个值，以便在单击日历日期时仅在特定日期显示提醒？我尝试解析（MDN 似乎不推荐）但输出数字不同。我试图与 valueOf() 进行比较，但输出为 false。

编辑：

我能够比较两个日期并且输出为真。因此，我设置了一个新的道具来提醒“显示”，状态为“假”。但是当我尝试在两个日期相同时将此道具返回为真时，道具不会改变。 （使用开发工具手动更改，显示/隐藏功能现在可以正常工作）。

在我的 index.js 文件中，我在单击日历中的特定日期时创建了一个 onChange 函数：

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.第一个代码sn-p：

第一个代码 sn-p 可能无法正常工作，因为您忘记将新数组存储在一个变量中并在使用它的状态上重置 reminders（您在第二个代码 sn-p 中正确执行了此操作）。

所以，第一个代码 sn-p 应该是这样的：

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

setReminders(updatedReminders);

2。第二个代码片段：

不确定为什么这不起作用，YET。当我有更新时，我会通知你。

同时，看看我对第一个代码 sn-p 的建议是否有效？