0

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

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

编辑：

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

在我的 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("")
      )
    );
  };
4

1 回答 1

1

1. 第一个代码片段：

第一个代码片段可能不起作用，因为您忘记将新数组存储在变量中并reminders使用它重置状态（您在第二个代码片段中正确执行了此操作）。

所以，第一个代码片段应该是这样的：

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

setReminders(updatedReminders);

2. 第二个代码片段：

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

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

于 2021-08-21T10:18:11.020 回答