JS扩展运算符与嵌套数组：如何正确删除media数组元素？

你的代码出现两个关键问题，导致无法正常工作：

1. 错误覆盖了整个line数组 #

你直接把line赋值为[{ ...state.line[line_index], ... }]，这会把原state.line里的其他元素全部丢掉，只保留你修改的那一个元素，这显然不是你想要的结果。

2. 对象字面量语法错误 #

你在对象里写了media = [...]，这是错误的语法——对象的键值对应该用冒号:而不是等号=，这也是导致media被意外转成奇怪对象的核心原因。

正确实现方式 #

我们需要保留原line数组的所有元素，只修改指定索引项的media数组，同时遵循不可变状态更新的原则（如果是在Redux这类状态管理库中，这一点尤为重要）：

return {
  ...state,
  line: state.line.map((item, idx) => {
    // 仅处理目标索引的line元素
    if (idx === line_index) {
      return {
        ...item, // 复制原元素的所有其他属性
        // 生成删除指定元素后的新media数组
        media: [
          ...item.media.slice(0, action.payload.index),
          ...item.media.slice(action.payload.index + 1)
        ]
      };
    }
    // 其他元素直接返回，保持原有状态
    return item;
  })
};

为什么这样写是对的？ #

• 使用Array.map()遍历line数组：既保留了所有原元素，又能精准修改目标项，不会丢失任何数据。
• 扩展运算符...item：复制原line元素的所有属性，避免直接修改原对象，符合不可变状态更新的要求。
• 正确的对象键值对语法：用media:赋值，而非错误的media =，确保media始终是数组类型。
• slice()方法：返回全新数组，不会修改原media数组，保证状态更新的纯净性。

如果担心索引越界（比如action.payload.index超出media数组的合法范围），可以加一个简单的边界判断：

media: action.payload.index >= 0 && action.payload.index < item.media.length
  ? [
      ...item.media.slice(0, action.payload.index),
      ...item.media.slice(action.payload.index + 1)
    ]
  : item.media // 索引不合法时，直接返回原数组

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