我有一个嵌套数组对象,如下所示:
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 并将值更改selected为trueor false。这是我到目前为止所做的:
selected
true
false
const onPressHandler = (id) => { let updateBool = nestedArray.map((x) =>{ x.item.id === id ? { ...x, selected: !selected } : x }) }
但它不会改变原始数组的任何内容。我在这里做错了什么?
如果你只是做一个小的改变,那么nestedArray为每个创建一个新数组和新数组似乎有点多余item。
nestedArray
item
只需循环数据并更改匹配的数据selected,id然后您就可以跳出循环 - 工作完成。这会快得多,因为如果找到匹配项,它find 也会短路自己的迭代。
id
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);