如何使用JavaScript和React对API返回的DateTime数据做比较筛选

开发者阿泽

2026-10-2

问题根因

属性名拼写错误：你测试的bigN.licitacoes.date不符合给定的JSON结构，正确字段名是licitacoesDate，读取不存在的属性会得到undefined，转成日期后为无效值，直接比较就会抛出错误
比较逻辑写反：原filter代码的判断条件是筛选小于当前日期的条目，和你需要的「大于当前日期」的需求相反
类型不匹配：字符串格式的日期不能直接和Date对象比较，必须统一转成时间戳或Date类型后再做判断

正确实现代码

场景1：精确到时分秒比较

直接用时间戳做比较，性能更高，同时兼容脏数据校验：

// 写在选择按钮的if判断逻辑内
if (/* 此处替换为用户选中指定选项的判断条件 */) {
  const currentTs = Date.now();
  // 筛选符合要求的条目
  const validList = licitacoes.filter(item => {
    const itemTs = new Date(item.licitacoesDate).getTime();
    // 过滤掉日期格式异常的脏数据，避免报错
    if (isNaN(itemTs)) return false;
    // 保留licitacoesDate大于当前时间的条目
    return itemTs > currentTs;
  });
  // 后续页面渲染逻辑，此处仅为示例打印
  validList.forEach(item => console.log(item.cityName));
}

场景2：仅按自然日期比较（忽略时分秒）

如果业务要求只要日期晚于当前日期就算符合，不需要精确到时间，可将两个日期的时分秒都清零后再比较：

if (/* 此处替换为用户选中指定选项的判断条件 */) {
  // 清零当前日期的时分秒
  const currentDate = new Date();
  currentDate.setHours(0, 0, 0, 0);
  const currentTs = currentDate.getTime();

  const validList = licitacoes.filter(item => {
    const itemDate = new Date(item.licitacoesDate);
    if (isNaN(itemDate.getTime())) return false;
    // 清零条目标题的时分秒
    itemDate.setHours(0, 0, 0, 0);
    return itemDate.getTime() > currentTs;
  });
  // 后续渲染逻辑
}