React/JS匹配数组对象用户邮箱 按权限判断按钮禁用状态

首先注意你给出的UserList结构有一层多余的外层数组包裹，实际存储用户权限的是数组第一个元素下以数字为键的对象集合，写逻辑的时候要先处理这层结构。

核心判断逻辑 #

不推荐直接用includes扫整个结构判断：直接对数组调用includes读不到嵌套的email字段，把整个对象转成字符串再匹配又容易出现误判（比如其他字段刚好出现相同字符串就会判断错误），精准匹配字段的写法更可靠：

// 注意邮箱是字符串，定义的时候要加引号
const myEmail = "user2@gmail.com";

/**
 * 校验当前用户是否为只读权限
 * @param {string} currentEmail 当前用户邮箱
 * @param {Array} permissionSource 权限列表数据
 * @returns {boolean} 返回true时按钮需要禁用
 */
const isReadOnlyUser = (currentEmail, permissionSource) => {
  // 提取所有用户权限条目，适配你当前的嵌套结构
  const allUserPermissions = Object.values(permissionSource[0]);
  // 精准匹配当前用户的权限条目
  const currentUserPerm = allUserPermissions.find(item => item.users.email === currentEmail);
  // 没找到匹配用户时可以根据业务需求调整返回值，这里默认无匹配就禁用按钮
  if (!currentUserPerm) return true;
  return currentUserPerm.permission.access === "Read Only";
};

// 直接得到按钮需要的disabled布尔值
const buttonDisabled = isReadOnlyUser(myEmail, UserList);

如果后续你优化数据结构，去掉外层多余的数组，直接把用户权限对象存在数组中（即const UserList = [{users: {...}, permission: {...}}, ...]），只需要把上面提取allUserPermissions的逻辑改成const allUserPermissions = permissionSource即可，其余逻辑不用修改。

跨组件传值实现 #

因为控制状态的按钮在独立文件中，选以下两种常用方案即可：

• 方案1：状态上提，通过props传递
  在持有UserList和当前用户邮箱的上层组件中，提前调用上面的工具函数计算出buttonDisabled布尔值，作为props传给独立的按钮组件，按钮组件内部直接绑定<button disabled={buttonDisabled}></button>即可。这种方案下按钮组件完全不需要感知权限逻辑，只负责根据传入的props渲染，职责最清晰，优先推荐。
• 方案2：全局状态+公共工具函数
  如果用户权限是全站通用的逻辑，可以把当前登录用户邮箱、权限列表存在全局状态中（比如React Context、Redux，Vue的Pinia/Vuex都可以），再把上面的校验函数抽成公共工具方法，在按钮组件文件中直接引入方法、读取全局状态计算出禁用状态即可，适合多个地方都需要做同类权限判断的场景。

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