如何修改嵌套对象数组中subCategories的value值并保持结构

问题背景 #

我正在开发一个项目，需要根据特定项的按钮点击状态修改数组中的值。触发onChangeValue时，要把比如vegetarian的value改为true，但没法正确修改subCategories里项的value，还得保持整个data数组的原有格式。

当前代码与问题 #

数据定义 #

const [data, setData] = useState([
     {
        category: 'Diet',
        subCategories: [
          {name:'pescatarian', value: false },
          {name:'vegan', value: false }, 
          {name:'vegetarian', value: false }
        ],
     }, {
        category: 'Daily Exercise in Hours',
        subCategories: [{name:'one', value: false },{name:'two', value: false }, {name:'three', value: false }, {name:'four', value: false }],
      },
  ])

现有onChangeValue函数 #

const onChangeValue = (item, changedValue) => {
    const newData = data.map(items => {
      if (items.subCategories.some(x => x.name === item.name)) {
        return {
          ...items,
          name: item.name,
          value: changedValue,
        }
       }
      return items
    })
    setData(newData);
  }

当前错误结果 #

执行后得到的数组格式错误，额外添加了name和value到外层对象，而非修改subCategories内的项：

[{"category": "Diet", "name": "pescatarian", "subCategories": [[Object], [Object], [Object]], "value": true}, {"category": "Daily Exercise in Hours", "subCategories": [{name:'one', value: false },{name:'two', value: false }, {name:'three', value: false }, {name:'four', value: false }]}]

尝试修改返回值为...items.subCategories后，结果更混乱：

[{"0": {"name": "pescatarian", "value": false}, "1": {"name": "vegan", "value": false}, "2": {"name": "vegetarian", "value": false}, "name": "pescatarian", "value": true}, {"category": "Daily Exercise in Hours", "subCategories": [{name:'one', value: false },{name:'two', value: false }, {name:'three', value: false }, {name:'four', value: false }]}]

期望结果 #

希望修改对应subCategories内指定项的value，保持数组原有结构：

[{"category": "Diet", "subCategories": [{name: "pescatarian",value: false},{name:"vegan", value: false },{name:"vegetarian", value: true }]}, {"category": "Daily Exercise in Hours", "subCategories": [{name:'one', value: false },{name:'two', value: false }, {name:'three', value: false }, {name:'four', value: false }]}]

解决方案 #

问题出在没有正确遍历并修改subCategories数组。正确的做法是，找到包含目标项的category后，对其subCategories进行映射，修改匹配项的value：

const onChangeValue = (item, changedValue) => {
  const newData = data.map(category => {
    // 检查当前category的subCategories是否包含目标项
    if (category.subCategories.some(sub => sub.name === item.name)) {
      return {
        ...category, // 保留原有属性
        // 重新生成subCategories数组，修改匹配项的value
        subCategories: category.subCategories.map(sub => 
          sub.name === item.name ? {...sub, value: changedValue} : sub
        )
      };
    }
    return category; // 不匹配的category直接返回
  });
  setData(newData);
};

解释 #

1. 遍历外层data数组的每个category对象
2. 对包含目标项的category，复制其原有属性，然后重新处理subCategories数组：
   • 遍历subCategories，找到与目标item.name匹配的项，复制该项并修改value为changedValue
   • 不匹配的项直接返回原对象
3. 不包含目标项的category直接返回原对象，保证其他数据不受影响

这样就能精准修改subCategories内指定项的value，同时完全保留原有数组结构。

内容的提问来源于stack exchange，提问作者pelotador.1