如何仅在 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. 第二个代码片段：

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

同时，看看我对第一个代码片段的建议是否有效？