一尘不染

在 JavaScript 中更改匹配 Id 的嵌套数组中的值

javascript

我有一个嵌套数组对象,如下所示:

const nestedArray = [
    { name : 'Living room',
      item : 
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                image: Images.light,
                imageDark: Images.lightDark,
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
                title: "Climate",
                titleStatus: '17',
                image: Images.meter,
                imageDark: Images.meterDark,
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-145571e29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                image: Images.ventilation,
                imageDark: Images.ventilationDark,
                selected: false
            }
        ]

    },
    { name: 'Kitchen',
      item :
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad53cbb28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                image: Images.light,
                imageDark: Images.lightDark,
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-cdbd91aa97f63",
                title: "Climate",
                titleStatus: '17',
                image: Images.meter,
                imageDark: Images.meterDark,
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-145vdf571e29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                image: Images.ventilation,
                imageDark: Images.ventilationDark,
                selected: false
            }
        ]

    },
    { name : 'Master bedroom',
      item  : 
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad5xx3abb28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                image: Images.light,
                imageDark: Images.lightDark,
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-fbdss91aa97f63",
                title: "Climate",
                titleStatus: '17',
                image: Images.meter,
                imageDark: Images.meterDark,
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-145571eaa29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                image: Images.ventilation,
                imageDark: Images.ventilationDark,
                selected: false
            }
        ]

    },
    { name : 'Kids bedroom',
      item  : 
        [
            {
                id: "bd7acbea-c1b1-46c2-aed5-3ad53abbkk28ba",
                title: "Light",
                titleStatus: 'Home Daytime',
                image: Images.light,
                imageDark: Images.lightDark,
                selected: false
            },
            {
                id: "3ac68afc-c605-48d3-a4f8-fbd91kkaa97f63",
                title: "Climate",
                titleStatus: '17',
                image: Images.meter,
                imageDark: Images.meterDark,
                selected: false
            },
            {
                id: "58694a0f-3da1-471f-bd96-14557331e29d72",
                title: "Ventilation",
                titleStatus: 'Auto',
                image: Images.ventilation,
                imageDark: Images.ventilationDark,
                selected: false
            }
        ]

    },

];

现在我将在函数中传递一个 Id,需要匹配数组中的 Id 并将值更改selectedtrueor false。这是我到目前为止所做的:

    const onPressHandler = (id) => {
        let updateBool = nestedArray.map((x) =>{
           x.item.id === id ? { ...x, selected: !selected } : x
        })
    }

但它不会改变原始数组的任何内容。我在这里做错了什么?


阅读 108

收藏
2022-07-25

共1个答案

一尘不染

如果你只是做一个小的改变,那么nestedArray为每个创建一个新数组和新数组似乎有点多余item

只需循环数据并更改匹配的数据selectedid然后您就可以跳出循环 - 工作完成。这会快得多,因为如果找到匹配项,它find 也会短路自己的迭代。

如果您不想改变原始数组,只需在函数中复制它,更改并返回它。性能仍然要高得多。

const nestedArray=[{name:"Living room",item:[{id:"bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",title:"Light",titleStatus:"Home Daytime",selected:!1},{id:"3ac68afc-c605-48d3-a4f8-fbd91aa97f63",title:"Climate",titleStatus:"17",selected:!1},{id:"58694a0f-3da1-471f-bd96-145571e29d72",title:"Ventilation",titleStatus:"Auto",selected:!1}]},{name:"Kitchen",item:[{id:"bd7acbea-c1b1-46c2-aed5-3ad53cbb28ba",title:"Light",titleStatus:"Home Daytime",selected:!1},{id:"3ac68afc-c605-48d3-a4f8-cdbd91aa97f63",title:"Climate",titleStatus:"17",selected:!1},{id:"58694a0f-3da1-471f-bd96-145vdf571e29d72",title:"Ventilation",titleStatus:"Auto",selected:!1}]},{name:"Master bedroom",item:[{id:"bd7acbea-c1b1-46c2-aed5-3ad5xx3abb28ba",title:"Light",titleStatus:"Home Daytime",selected:!1},{id:"3ac68afc-c605-48d3-a4f8-fbdss91aa97f63",title:"Climate",titleStatus:"17",selected:!1},{id:"58694a0f-3da1-471f-bd96-145571eaa29d72",title:"Ventilation",titleStatus:"Auto",selected:!1}]},{name:"Kids bedroom",item:[{id:"bd7acbea-c1b1-46c2-aed5-3ad53abbkk28ba",title:"Light",titleStatus:"Home Daytime",selected:!1},{id:"3ac68afc-c605-48d3-a4f8-fbd91kkaa97f63",title:"Climate",titleStatus:"17",selected:!1},{id:"58694a0f-3da1-471f-bd96-14557331e29d72",title:"Ventilation",titleStatus:"Auto",selected:!1}]}];

function changeSelected(id) {
  for (const { item } of nestedArray) {
    const found = item.find(obj => obj.id === id);
    if (found) {
      found.selected = !found.selected;
      break;
    }
  }
}

changeSelected('bd7acbea-c1b1-46c2-aed5-3ad53abbkk28ba');

console.log(nestedArray);
2022-07-25