Ionic v5+Angular数组添加活动时所有元素date属性异常更新求助

问题详情 #

我正在用Ionic v5和Angular开发一个学校项目，在活动服务中向数组添加活动对象时遇到异常：每次添加新活动，所有已存在的活动的date属性都会被修改为新活动的日期。我推测是activityDate变量存在引用问题，但无法解决，预期是创建新活动时不影响已有活动的日期。

活动结构 #

id(string)
name(string)
date(Date)
location(string)
description(string)
participants(FamilyMember[])
labels(Label[])

测试活动生成代码（构造函数中） #

constructor() {
        let b = 0;
        let date = new Date();
        let activityName = 'activity ' + b;
        let activityDate = date;
        console.log('date on init:' + date)

        for (let i = 0; i < 20; i++) {
            activityDate = this.addDays(date, i)
            console.log('date after adding days' + date)
            for (let j = 0; j < 2; j++) {
                this.newActivity(activityName, [], [], 'een activiteit met uitleg', 'ergens', activityDate)
            }
            console.log('lijst na poging ' + i);
            console.log(this.getAllActivities());
            b++;
            activityName = 'activity ' + b;
            console.log(activityName);
        }
}

创建新活动的方法 #

newActivity(name: string,  participants:FamilyMember[] = [], labels: Label[] = [],description: string, location: string, date:Date): void {
    this.#activityList.push({
      name,
      id : UUID.UUID(),
      date,
      description,
      location,
      participants,
      labels
    });
}

解决方法 #

问题的核心是Date属于引用类型：你传递的是同一个Date对象的内存引用，所有活动都指向同一个Date实例，修改这个实例就会同步影响所有引用它的活动。

具体修复步骤 #

1. 修改addDays方法，返回新的Date实例
   如果你的addDays是直接修改传入的原Date对象并返回，就会导致所有引用该对象的活动日期同步变化。改成克隆原日期后再修改：

   // 错误写法（修改原对象）
   addDays(date: Date, days: number): Date {
       date.setDate(date.getDate() + days);
       return date;
   }
   
   // 正确写法（返回新的Date实例）
   addDays(date: Date, days: number): Date {
       const newDate = new Date(date); // 克隆原日期对象
       newDate.setDate(newDate.getDate() + days);
       return newDate;
   }
   

2. 可选：在调用newActivity时主动克隆日期
   如果你不想修改addDays，也可以在传递日期参数时直接创建新的Date实例，确保每个活动拿到独立的日期对象：

   this.newActivity(activityName, [], [], 'een activiteit met uitleg', 'ergens', new Date(activityDate))
   

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