如何使用map函数更新对象数组中的用户角色嵌套对象

AI 小北

2026-8-20

问题解答

你给出的示例代码无法实现更新用户角色的需求，核心问题是更新roles的写法错误——直接在对象中写[{admin: false}]是无效语法，既没有指定要更新的字段名（应该是roles），也没有正确处理角色数组的修改逻辑。

正确的实现方式分两种场景：

场景1：直接替换该用户的整个角色数组

如果需要完全替换目标用户的roles（比如把所有角色换成新的），可以这样写：

const [users, setUsers] = useState([{
    id: 1,
    login: 'abc',
    roles: [{ admin: false }, { student: true }]
  },
  {
    id: 2,
    login: 'abc2',
    roles: [{ admin: false }, { student: true }]
  },
])
const targetId = 1;

setUsers(
  users.map(user => {
    return user.id === targetId 
      ? { ...user, roles: [{ admin: true }] } // 明确指定roles字段，替换整个数组
      : user;
  })
);

场景2：修改角色数组中的某个特定角色（保留其他角色）

如果只是要修改现有角色中的某一项（比如把admin从false改成true，同时保留student角色），需要嵌套遍历角色数组，同时注意保留原数据：

setUsers(
  users.map(user => {
    if (user.id !== targetId) return user;
    
    // 遍历角色数组，修改指定角色，保留其他角色
    const updatedRoles = user.roles.map(role => {
      // 判断当前角色是否是admin角色
      if ('admin' in role) {
        return { admin: true };
      }
      // 其他角色直接返回，避免丢失
      return role;
    });
    
    return { ...user, roles: updatedRoles };
  })
);