React中如何为对象数组内指定对象添加selected属性

实现思路 #

因为React状态遵循不可变原则，不能直接修改原状态对象，所以需要通过创建新的数组和对象完成更新：

1. 遍历原attributes数组，逐个处理每个属性组
2. 若当前组的name与传入的目标组名匹配，就遍历该组的items，给每个item添加selected属性——匹配目标值的设为true，同组其他设为false
3. 非目标组直接返回浅拷贝后的对象，保持原有结构不变

代码实现 #

假设你用函数组件+useState管理状态，完整代码如下：

import { useState } from 'react';

function App() {
  const [attributes, setAttributes] = useState([
    {name: "capacity", items: [{ value: '256GB'},{value: '512GB'}]},
    {name: 'With USB 3 ports', items: [{value: 'Yes'}, { value: 'No'}]}
  ]);

  // 接收属性组名称和选中值的函数
  const setAttributeSelected = (groupName, selectedValue) => {
    setAttributes(prevAttributes => {
      return prevAttributes.map(group => {
        if (group.name === groupName) {
          return {
            ...group,
            items: group.items.map(item => ({
              ...item,
              selected: item.value === selectedValue
            }))
          };
        }
        return {...group};
      });
    });
  };

  // 调用示例：选中capacity组的256GB
  // setAttributeSelected("capacity", "256GB");

  return (
    // 你的组件内容
    <div></div>
  );
}

export default App;

代码说明 #

• 使用函数式更新（prevAttributes）确保基于最新状态修改，避免异步更新导致的状态不一致问题
• 对每个属性组和item做浅拷贝（...group、...item），彻底切断与原状态对象的引用关系
• 目标组内的selected属性会自动覆盖已存在的值（如果之前有的话），非目标组不会被修改

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