React中按索引修改对象数组属性失败，如何正确为实例赋值？

算力阿峰

2026-8-5

问题分析与解决方案

问题根源

你当前的代码只创建了一个Training实例，然后把这个实例的引用重复添加到数组中。由于JavaScript中对象是引用类型，数组里的四个元素实际上指向同一个内存地址的对象。所以forEach循环中每次修改programNum，都是在修改同一个对象的属性，最后一次循环（i=3，赋值为4）会覆盖之前所有的修改，导致所有元素的programNum都变成4。

修复方案

需要在循环中每次创建新的Training实例，确保数组中的每个元素都是独立的对象。以下是两种可行的实现方式：

方式一：创建实例时直接赋值`programNum`

class Training {
  km = 0;
  programNum = 1;
  success = false;
  constructor(frequency, years) {
    this.frequency = frequency;
    this.years = years;
  }
}

const createTraining = (frequency, years) => {
  const temp = [];
  for (let i = 0; i < frequency; i++) {
    // 每次循环创建新的Training实例
    const newTraining = new Training(frequency, years);
    // 直接设置当前实例的programNum
    newTraining.programNum = i + 1;
    temp.push(newTraining);
  }
  console.log(temp);
  return temp;
};

// 测试调用
createTraining(4, 2);

方式二：先创建所有实例，再通过`forEach`赋值

class Training {
  km = 0;
  programNum = 1;
  success = false;
  constructor(frequency, years) {
    this.frequency = frequency;
    this.years = years;
  }
}

const createTraining = (frequency, years) => {
  const temp = [];
  // 先创建所有独立的Training实例
  for (let i = 0; i < frequency; i++) {
    temp.push(new Training(frequency, years));
  }
  // 为每个实例设置对应的programNum
  temp.forEach((item, i) => {
    item.programNum = i + 1;
  });
  console.log(temp);
  return temp;
};

// 测试调用
createTraining(4, 2);