为什么React useEffect中filter未正确更新Firestore返回的事件状态？

你的代码存在3个核心问题，导致筛选逻辑失效：

• 异步执行时序错误：getEvents()是异步函数，你调用后没有等待请求完成就直接执行后续的filter、setLoading逻辑，此时getDocs还没返回数据，expEvents还是初始的空数组，筛选自然无结果。后续getEvents内部的setExpEvents会直接把全量未筛选的数据赋值给expEvents，覆盖掉你之前的筛选结果。
• 闭包陷阱：你写setExpEvents(expEvents.filter(...))时，拿到的expEvents是useEffect首次执行时闭包缓存的初始值（空数组），永远拿不到后续状态更新后的值。
• 日期比较不可靠：直接用toLocaleDateString()生成的日期字符串格式随浏览器、系统区域设置变化，和你存储的M/D/YYYY格式不一定匹配；且Date.parse对非ISO标准日期字符串的解析兼容性差，很容易返回NaN导致比较逻辑失效。

核心思路是：等待Firestore请求完成拿到全量数据后，当场完成两类事件的拆分，不要依赖状态更新后再做筛选，同时统一日期比较逻辑避免格式问题。
完整修正代码如下：

// 生成当天零点的时间戳作为比较基准，避免字符串格式兼容问题
const getTodayZeroTimestamp = () => {
  const date = new Date();
  date.setHours(0, 0, 0, 0);
  return date.getTime();
};
const todayBase = getTodayZeroTimestamp();

const [events, setEvents] = useState([]);
const [expEvents, setExpEvents] = useState([]);
const [loading, setLoading] = useState(false);

useEffect(() => {
  setLoading(true);
  const fetchEvents = async () => {
    try {
      const snapshot = await getDocs(eventsRef);
      // 先组装全量事件列表，建议带上文档id方便后续操作
      const allEvents = snapshot.docs.map(doc => ({
        ...doc.data(),
        id: doc.id
      }));

      const validList = [];
      const expiredList = [];
      // 遍历拆分事件
      allEvents.forEach(event => {
        // 解析M/D/YYYY格式的日期，转成对应零点的时间戳
        const [month, day, year] = event.enddate.split('/').map(Number);
        // JS Date月份从0开始计数，所以月份要减1
        const eventEndTime = new Date(year, month - 1, day).getTime();

        if (eventEndTime < todayBase) {
          expiredList.push(event);
        } else {
          validList.push(event);
        }
      });

      // 批量更新状态
      setEvents(validList);
      setExpEvents(expiredList);
    } catch (err) {
      console.error('事件拉取失败:', err);
    } finally {
      // 无论请求成功失败，都关闭loading状态
      setLoading(false);
    }
  };

  fetchEvents();
}, []);

• 如果数据量较大，不建议前端拉取全量数据后再筛选，可以直接在Firestore侧通过where条件做查询拆分，减少前端传输和计算压力。注意如果要在Firestore侧做日期比较，不要把enddate存为M/D/YYYY字符串，建议存储为Firestore Timestamp类型或者毫秒时间戳，避免数据库侧的格式解析问题。
• 日期比较逻辑尽量统一用时间戳做基准，不要用字符串直接比较，能规避绝大多数区域设置、格式差异带来的bug。

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