React中如何优雅修改数组指定对象的closeTime.hours属性？

需求说明 #

目标是修改buildHours数组中openDay为TUESDAY的对象的closeTime.hours属性值，现有数组结构如下：

const buildHours = [
  {
    "openDay": "MONDAY",
    "openTime": {},
    "closeDay": "MONDAY",
    "closeTime": {
      "hours": 24
    }
  },
  {
    "openDay": "TUESDAY",
    "openTime": {
      "hours": 9
    },
    "closeDay": "TUESDAY",
    "closeTime": {
      "hours": 17
    }
  },
];

原实现方式的问题 #

原代码通过filter先移除目标对象、修改后再重新添加，流程繁琐：

const tempObject = buildHours.filter(i => i.openDay !== "TUESDAY"); // 移除周二对象
const tempHours = buildHours.filter(i => i.openDay === "TUESDAY")[0]; // 获取周二对象
tempHours.openTime.hours = e.value; // 注：原需求是修改closeTime.hours，此处疑似笔误
tempObject.push(tempHours); // 重新组合
console.log(tempObject);

更优雅的实现方案 #

filter的核心作用是筛选数组元素，并不适合直接用来修改元素属性。推荐以下两种更直接的方式：

1. 直接修改原数组（适合允许修改原数组的场景）

利用find方法快速定位目标对象，因为数组中的对象是引用类型，直接修改属性会同步到原数组：

const tuesdayItem = buildHours.find(item => item.openDay === "TUESDAY");
if (tuesdayItem) {
  // 按需求修改closeTime.hours
  tuesdayItem.closeTime.hours = e.value;
}

2. 生成新数组（不修改原数组，适合纯函数场景）

如果需要保留原数组不变，用map遍历生成新数组，对目标对象进行浅拷贝后修改属性：

const updatedBuildHours = buildHours.map(item => {
  if (item.openDay === "TUESDAY") {
    // 逐层浅拷贝，避免修改原对象的引用
    return {
      ...item,
      closeTime: {
        ...item.closeTime,
        hours: e.value
      }
    };
  }
  // 非目标对象直接返回原引用
  return item;
});

注意点 #

原代码中修改的是openTime.hours，但需求是修改closeTime.hours，需要注意修正这个逻辑差异。

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