React useState管理的按日期分组数组如何删除单个对象元素

原代码失效的核心原因：

• events是按日期维度分组的嵌套结构，顶层元素是日期分组对象，实际事件存储在每个分组的子数组中，原代码直接对顶层分组对象做过滤，根本没有遍历到实际事件项
• 过滤逻辑写反：移除目标元素需要保留_id与目标id不相等的项，原代码写的是保留相等项
• 存在未定义变量直接操作、冗余state维护的问题，容易引发值不同步bug

分组结构参考（对应附图）：

// events 实际结构
[
  {
    date: "对应分组的日期值",
    events: [/* 该日期下的事件对象，每个事件带唯一_id属性 */]
  }
  // 其余日期分组...
]

修复后完整代码 #

const [events, setEvents] = useState([]);
const [eventsInCard, setEventsInCard] = useState([]);
// 加购计数直接从加购列表派生，不需要单独维护state，避免同步错误
const inCard = eventsInCard.length;

function addToCard(targetEvent) {
  // 已加购的事件直接跳过，避免重复添加
  if (eventsInCard.some((e) => e._id === targetEvent._id)) return;

  // 更新加购列表
  setEventsInCard(prevList => [...prevList, targetEvent]);

  // 从原分组事件列表中移除已加购的目标事件
  setEvents(prevGroupedList => {
    return prevGroupedList.map(dateGroup => {
      // 过滤掉当前分组内匹配目标id的事件
      const remainEvents = dateGroup.events.filter(
        item => item._id !== targetEvent._id
      );
      // 保留分组原有属性，替换过滤后的事件列表
      return {
        ...dateGroup,
        events: remainEvents
      };
    }).filter(dateGroup => dateGroup.events.length > 0);
    // 上行可选：如果某日期分组下事件全部被移除，自动删除空分组，不需要可以删掉
  });
}

注意事项 #

• 如果你的分组对象中存储事件的字段名不是events（比如叫items/list），把代码中对应字段替换成你实际使用的字段名即可
• 所有state更新均使用函数式写法传入前值，规避React state异步更新导致的闭包旧值问题
• 移除事件时不会破坏原有分组结构，其余日期、其余事件的展示完全不受影响

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