React中遍历数组时对象属性消失问题求助

可能的原因及对应解决方案 #

1. 异步操作未正确等待 #

如果从数据库获取月份是异步操作，但未通过await等待结果完成，会导致periods数组先被初始化，而months属性要等到异步请求结束后才会赋值，此时打印或遍历数组时，months还未被写入。

错误示例：

const periods = [];
const years = await getYears();
years.forEach(year => {
  const period = { year };
  periods.push(period);
  // 异步获取月份但未等待，months会在后续才赋值
  getMonths(year).then(months => {
    period.months = months;
  });
});
// 此时打印的periods中，months还未被赋值
console.log(periods);

解决方法：改用for...of循环配合await，确保每个年份的月份获取完成后再构建对象：

const periods = [];
const years = await getYears();
for (const year of years) {
  const months = await getMonths(year);
  periods.push({ year, months });
}
// 此时每个period都已包含完整的months属性
console.log(periods);
periods.forEach(period => console.log(period.months));

2. 属性被设置为不可枚举 #

如果通过Object.defineProperty添加months属性时，将enumerable设为false，打印对象时该属性不会显示，但实际可以访问。

错误示例：

const period = { year: 2024 };
Object.defineProperty(period, 'months', {
  value: Array.from({length:12}, (_,i)=>i+1),
  enumerable: false // 不可枚举，打印对象时隐藏
});
periods.push(period);
console.log(period); // 仅显示year属性
console.log(period.months); // 能访问到值

解决方法：直接赋值（默认可枚举），或显式设置enumerable: true：

// 推荐：直接赋值
period.months = Array.from({length:12}, (_,i)=>i+1);

// 或修改defineProperty配置
Object.defineProperty(period, 'months', {
  value: Array.from({length:12}, (_,i)=>i+1),
  enumerable: true,
  writable: true
});

3. 控制台打印的“实时更新”误导 #

浏览器或Node.js控制台打印对象时，有时会显示对象的“当前状态”而非打印时刻的快照。比如你打印periods时months还未赋值，但展开对象时异步操作已完成，导致看起来属性存在但遍历访问不到。

验证方法：将对象转为JSON字符串打印，获取打印时刻的快照：

console.log(JSON.stringify(periods)); // 显示打印时的真实状态，不会后续更新

4. 循环变量作用域问题（旧版JS场景） #

如果用var声明循环变量，会导致所有period变量指向同一个引用，异步赋值时可能覆盖或未正确绑定。

解决方法：改用let/const声明循环内的变量，确保每个period是独立对象：

for (let i = 0; i < years.length; i++) {
  const period = { year: years[i] };
  periods.push(period);
  getMonths(years[i]).then(months => {
    period.months = months;
  });
}

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