React类组件中更新数组时旧数据丢失问题排查

问题根源 #

每次执行setTimeFunc时，你直接用activeModalDays.map()生成的新数组完全替换了原有的timingDetails，导致之前添加的非本次选中日期的数据（比如周一、周二）被覆盖丢失。另外代码里还有个逻辑错误：find条件中用了item.partition，但你生成的对象里键是shop，这会导致无法正确匹配已存在的项，可能引发重复添加问题。

解决方案 #

需要保留原有timingDetails中不在本次选中日期列表里的项，再合并本次处理后的日期项（更新已有项或新增项），最终得到完整的数组。

修改后的代码 #

setTimeFunc = () => {
    const { activeModalDays, start_time, close_time, activePartition, timingDetails: oldTimingDetails } = this.state;

    // 1. 保留原有数据中，不属于本次选中日期的项
    const remainingOldItems = oldTimingDetails.filter(item => 
        !activeModalDays.some(day => day.name === item.day)
    );

    // 2. 处理本次选中的日期项（更新或新增）
    const newUpdatedItems = activeModalDays.map(day => {
        const obj = {
            shop: activePartition,
            day: day.name,
            start_time: start_time,
            close_time: close_time
        };

        // 修正find条件：用item.shop匹配obj.shop，而非partition
        const existingItem = oldTimingDetails.find(item => 
            item.day === obj.day && item.shop === obj.shop
        );

        if (existingItem) {
            // 克隆并更新已有项
            const updatedItem = { ...existingItem };
            if (start_time !== updatedItem.start_time) {
                updatedItem.start_time = start_time;
            }
            if (close_time !== updatedItem.close_time) {
                updatedItem.close_time = close_time;
            }
            return updatedItem;
        } else {
            // 返回新项
            return obj;
        }
    });

    // 3. 合并保留的旧项和处理后的新项，更新状态
    this.setState({ 
        timingDetails: [...remainingOldItems, ...newUpdatedItems],
        activeModalDays: []
    });
}

关键改动说明 #

• 保留旧数据：通过filter和some组合，筛选出原有数据中不在本次选中日期里的项，避免丢失。
• 修正匹配条件：将item.partition改为item.shop，确保能正确找到已存在的日期配置项。
• 合并数组：把保留的旧项和本次处理的新项合并后再赋值给timingDetails，保证数据完整。

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