在React中如何用admins数组的name替换members数组的addedByAdminId值

错误原因分析 #

你当前代码存在两个核心问题：

• forEach方法没有返回值，所以objectC最终会是undefined，根本无法拿到目标数组
• 用filter查找管理员后直接取[0]['name']，如果某个addedByAdminId在admins中找不到匹配的id，filter返回空数组，[0]就是undefined，访问name就会抛出Cannot read properties of undefined错误——即便当前测试数据全匹配，实际业务中也大概率会出现不匹配的边界场景，必须提前处理

正确解决方案 #

优化思路 #

1. 先把admins转成以id为键、name为值的映射表，将查找管理员名字的时间复杂度从O(n)降到O(1)，提升性能
2. 用map方法返回新数组（React中推荐保持数据不可变性，避免直接修改原数组）
3. 处理找不到对应管理员的边界情况（比如默认设为'未知管理员'）

代码实现 #

// 生成管理员id与name的映射表
const adminNameMap = admins.reduce((map, admin) => {
  map[admin.id] = admin.name;
  return map;
}, {});

// 生成新的数组，不修改原members数据
const objectC = members.map(member => ({
  ...member,
  addedByAdminId: adminNameMap[member.addedByAdminId] || '未知管理员'
}));

代码说明 #

• reduce遍历admins生成{1: 'Admin 1', 2: 'Admin 2', ...}格式的映射表，后续通过id直接取值，比反复用filter高效得多
• map遍历members时，用扩展运算符...member复制原对象的所有属性，再覆盖addedByAdminId为对应的管理员名字
• || '未知管理员'用于处理找不到匹配id的情况，避免报错

若需直接修改原数组（React状态中不推荐） #

如果确实需要直接修改原members数组，可先判断是否找到对应管理员：

members.forEach(item => {
  const matchedAdmin = admins.find(admin => admin.id === item.addedByAdminId);
  item.addedByAdminId = matchedAdmin ? matchedAdmin.name : '未知管理员';
});
// 此时members已被修改，无需再赋值给objectC

验证结果 #

运行正确代码后，objectC会得到预期结果：

[
    {
        id: 1,
        name: 'Name 1',
        addedByAdminId: 'Admin 1'
    },
    {
        id: 2,
        name: 'Name 2',
        addedByAdminId: 'Admin 2'
    },
    {
        id: 3,
        name: 'Name 3',
        addedByAdminId: 'Admin 3'
    }
]

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