如何用Object.assign避免状态突变并合并数组对象值？

问题背景 #

处理状态数组时，直接修改数组内对象的属性会触发Invariant Violation: A state mutation was detected between dispatches错误。需求是将数组中Preferred Make元素的value与Second Preferred Make的value合并，然后移除Second Preferred Make元素。直接修改原对象的方式虽能实现功能，但会触发状态突变检测；错误使用Object.assign的写法则无法正确合并值。

需要找到与interests[makeIndex].value = ${interests[makeIndex].value}, ${interests[secondPreferredMakeIndex].value}``等效的、不会触发状态突变的Object.assign写法。

预期输出：

Preferred Make - before Chevrolet
Preferred Make - after Chevrolet, Porsche

错误原因分析 #

之前用Object.assign时，错误地将变量makeIndex作为对象属性名传入（而非数组索引），导致无法正确更新数组对应位置的元素。此外，直接用splice修改数组也属于状态突变，需要改用不修改原数组的方式。

正确实现代码 #

// Interests array from state
let interests = [
  {
    type: 'Preferred Make',
    value: 'Chevrolet',
  },
  {
    type: 'Second Preferred Make',
    value: 'Porsche',
  },
  {
    type: 'Preferred Model',
    value: 'Corvette',
  },
  {
    type: 'Second Preferred Model',
    value: 'Macan',
  }
];

console.log("Preferred Make - before", interests[0].value);

const secondPreferredMakeIndex = interests
  .map(x => x.type)
  .indexOf('Second Preferred Make');

if (secondPreferredMakeIndex > -1) {
  const makeIndex = interests.map(x => x.type).indexOf('Preferred Make');

  if (makeIndex > -1) {
    // 正确的Object.assign写法：复制数组+复制目标对象并更新value
    interests = interests.map((item, index) => {
      if (index === makeIndex) {
        // 复制原对象，更新value属性，避免直接修改原对象
        return Object.assign({}, item, {
          value: `${item.value}, ${interests[secondPreferredMakeIndex].value}`
        });
      }
      return item;
    });
  }

  // 用filter替代splice，生成新数组而非修改原数组
  interests = interests.filter((_, index) => index !== secondPreferredMakeIndex);
}

console.log("Preferred Make - after", interests[0].value);

关键说明 #

1. 更新对象时：使用map遍历数组，遇到目标索引时，用Object.assign({}, item, { ... })创建新对象，替换原数组中的对应元素，完全避免修改原对象。
2. 移除元素时：用filter生成新数组，排除目标索引的元素，替代会修改原数组的splice方法。

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