为什么React中按当前日期筛选state数据会返回空数组

常见根因 #

• 日期格式解析不兼容：手动拼接的当前日期为英文月缩写的美式格式（如 Jun 12, 2024），但Laravel后端返回的checkDate多为Y-m-d H:i:s格式。JS的Date.parse对非标准格式的容错存在浏览器差异，很容易出现某一侧解析结果为NaN，非数字值参与大小比较时，所有判断都会返回false，最终筛选结果为空。
• 时间边界不匹配：手动生成的当前时间戳是当日0点的毫秒值，而后端返回的checkDate往往携带具体时分秒（比如当日16:20的检查记录），即使格式完全匹配，只要记录时间晚于当日0点，就会被全部过滤，得不到有效结果。
• 字段结构不匹配：Laravel默认的Carbon时间类型序列化后是嵌套对象结构，实际日期字符串存在checkDate.date路径下，直接读取d.checkDate拿到的是对象而非字符串，传入Date.parse会返回NaN，直接导致筛选失效。

可复用的修复代码 #

替换原有易出问题的日期拼接逻辑，做全场景兼容：

// 直接生成当日0点的时间戳，无需手动拼接字符串
const todayStart = new Date();
todayStart.setHours(0, 0, 0, 0);
const inputTS = todayStart.getTime();

const result = filterReceiveChk.filter(item => {
  // 兼容嵌套对象的日期结构
  const rawDateStr = typeof item.checkDate === 'object' 
    ? item.checkDate?.date 
    : item.checkDate;
  const checkTimeTS = new Date(rawDateStr).getTime();
  // 过滤无效解析值，再做比较
  return !isNaN(checkTimeTS) && checkTimeTS <= inputTS;
});

快速验证步骤 #

• 在控制台单独打印Date.parse(d.checkDate)的返回值，确认是否出现NaN、时间戳异常偏大的问题
• 打印inputTS的实际值，核对是否匹配预期的当日时间节点
• 查看单条数据的结构，确认checkDate的实际取值路径，避免取到非日期值

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