React中如何实现点击日历指定日期时仅展示对应日期的提醒事项

问题核心原因 #

• 第一段代码的map方法仅生成了修改后的新数组，没有调用setReminders更新React状态，因此不会触发组件重渲染，修改的show属性自然不会生效。
• 第二段代码用filter直接过滤掉不符合条件的提醒项，会丢失其他日期的提醒数据，切换日期后无法正常展示对应内容，逻辑不符合需求。
• 依赖toLocaleString做日期格式化存在兼容性风险，不同设备的区域、时区设置会导致返回格式不一致，容易出现匹配错误。

修复方案 #

方案1：保留show属性的修改逻辑

统一用稳定的日期格式化方法对比，修改后主动更新提醒状态：

const onCalendarChange = (date) => {
  setDate(date);
  // 通用日期格式化方法，统一输出YYYYMMDD格式字符串，不受区域设置影响
  const getDateStr = (d) => {
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    return `${year}${month}${day}`;
  };
  const targetDate = getDateStr(date);

  const updatedReminders = reminders.map(item => {
    const itemDate = getDateStr(new Date(item.date));
    return {
      ...item,
      // 匹配的设为true，不匹配的设为false，避免之前的状态残留
      show: itemDate === targetDate
    };
  });
  // 必须调用set方法更新状态才会触发重渲染
  setReminders(updatedReminders);
};

渲染时直接根据item.show判断是否展示即可。

方案2：更简便的渲染时过滤（无需维护show属性）

不需要修改提醒项的属性，直接在渲染提醒列表的位置，根据当前选中的日期过滤要展示的内容：

// 写在渲染逻辑中，selectedDate就是你存在state里的当前选中日历日期
const filteredReminders = reminders.filter(item => {
  const getDateStr = (d) => {
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    return `${year}${month}${day}`;
  };
  return getDateStr(new Date(item.date)) === getDateStr(selectedDate);
});

// 直接遍历filteredReminders渲染即可

这种方案不需要修改原提醒状态，逻辑更简洁，也不会出现状态修改遗漏的问题。

内容的提问来源于stack exchange，提问作者salia_in_red