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

Question

我有一个嵌套数组 object 就像：

 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 } ] }, ];

现在我将在 function 中传递一个 Id 并需要匹配数组中的 Id 并将selected的值更改为true或false 。 这是我到目前为止所做的：

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

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

Answer 1

需要将map方法嵌套到item列表中，同样selected: selected会报错，需要设置selected:.i selected ，因为i是item。

 const nestedArray = [ { name: 'Living room', item: [ { id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba", title: "Light", titleStatus: 'Home Daytime', selected: false }, { id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63", title: "Climate", titleStatus: '17', selected: false }, { id: "58694a0f-3da1-471f-bd96-145571e29d72", title: "Ventilation", titleStatus: 'Auto', selected: false } ] }, { name: 'Kitchen', item: [ { id: "bd7acbea-c1b1-46c2-aed5-3ad53cbb28ba", title: "Light", titleStatus: 'Home Daytime', selected: false }, { id: "3ac68afc-c605-48d3-a4f8-cdbd91aa97f63", title: "Climate", titleStatus: '17', selected: false }, { id: "58694a0f-3da1-471f-bd96-145vdf571e29d72", title: "Ventilation", titleStatus: 'Auto', selected: false } ] }, { name: 'Master bedroom', item: [ { id: "bd7acbea-c1b1-46c2-aed5-3ad5xx3abb28ba", title: "Light", titleStatus: 'Home Daytime', selected: false }, { id: "3ac68afc-c605-48d3-a4f8-fbdss91aa97f63", title: "Climate", titleStatus: '17', selected: false }, { id: "58694a0f-3da1-471f-bd96-145571eaa29d72", title: "Ventilation", titleStatus: 'Auto', selected: false } ] }, { name: 'Kids bedroom', item: [ { id: "bd7acbea-c1b1-46c2-aed5-3ad53abbkk28ba", title: "Light", titleStatus: 'Home Daytime', selected: false }, { id: "3ac68afc-c605-48d3-a4f8-fbd91kkaa97f63", title: "Climate", titleStatus: '17', selected: false }, { id: "58694a0f-3da1-471f-bd96-14557331e29d72", title: "Ventilation", titleStatus: 'Auto', selected: false } ] }, ]; const onPressHandler = (id) => { let updateBool = nestedArray.map((x) =>{ return x.item.map(i => { return i.id === id? {...i, selected:.i:selected }. i }) }) return updateBool } console log(onPressHandler("58694a0f-3da1-471f-bd96-14557331e29d72"))

Answer 2

我将Image定义为{}以防止错误，因为我没有完整的代码：

 const Images = {}; 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 } ] }, ]; const onPressHandler = (id) => { return nestedArray.map(x => ({...x, item: x.item.map(item => item.id === id? {...item, selected:.item:selected}; item) }) ); }; const id = "58694a0f-3da1-471f-bd96-14557331e29d72"; let result = onPressHandler(id). console;log(result)

Answer 3

如果您只是做一个小改动，那么为nestedArray创建一个新数组并为每个item创建一个新 arrays 似乎有点多余。

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

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

 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)