JavaScript中根据ID修改嵌套数组内元素的selected值

你的代码存在三个核心问题，导致无法正确更新目标元素的selected值：

• 嵌套结构遍历错误：x.item是数组类型，不是单个对象，你直接写x.item.id根本找不到对应属性，匹配逻辑完全失效。
• 未正确引用目标元素的状态：代码里的!selected是未定义的变量，你需要获取匹配元素自身的selected值来取反。
• 未处理数组的赋值与不可变性：原数组nestedArray用const声明，无法直接修改；同时你用map生成的新数组没有赋值给任何变量，相当于没有生效。

正确实现方案（推荐不可变更新） #

如果是在React这类依赖状态引用变化的场景中，推荐生成新数组而非修改原数组：

const onPressHandler = (id) => {
  const updatedArray = nestedArray.map(room => {
    // 遍历当前房间的所有设备项
    const updatedItems = room.item.map(item => {
      // 匹配到目标ID时，返回新对象并反转selected值
      if (item.id === id) {
        return { ...item, selected: !item.selected };
      }
      // 未匹配的项直接返回原对象
      return item;
    });
    // 返回新的房间对象，替换更新后的设备数组
    return { ...room, item: updatedItems };
  });
  
  // 若用于React状态更新，这里调用setState：
  // setNestedArray(updatedArray);
  
  return updatedArray;
};

直接修改原数组的方案（不推荐） #

如果不需要考虑不可变性，只是单纯修改原数组，可以用forEach遍历修改：

const onPressHandler = (id) => {
  nestedArray.forEach(room => {
    room.item.forEach(item => {
      if (item.id === id) {
        item.selected = !item.selected;
      }
    });
  });
};

注意：直接修改原数组会产生副作用，不利于数据追踪和框架的状态更新逻辑，优先推荐不可变更新方案。

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