React中如何动态指定对象键调用map()渲染列表

错误原因 #

你当前的写法有两个核心问题：

• forEach 方法只会执行循环逻辑，不会返回任何值，JSX 无法拿到循环内部生成的组件节点完成渲染
• 嵌套循环的返回值没有做扁平化处理，直接写在department.roles.map()的回调中会得到undefined，无法被React正常识别渲染

正确实现代码 #

你可以用flatMap替代forEach，它会把多层遍历生成的节点数组自动拍平成一维数组，刚好符合JSX的渲染要求，同时建议加个空值兜底，避免个别角色下对应人员列表不存在时抛出报错：

export default function EmployeesByDepartmentList({ department }) {
  const employeeTypes = ["supervisors", "employees"];

  return (
    <div className={styles.departmentSection} key={department.id}>
      {department.roles.length
        ? department.roles.flatMap((role) => 
            // 遍历类型列表，拍平嵌套的人员数组
            employeeTypes.flatMap((type) => 
              // 加空值兜底，兼容数组不存在的场景
              (role[type] || []).map((item) => (
                <ListLinkItem
                  key={item.id}
                  id={item.id}
                  href={`employees/${item.id}/`}
                >
                  <EmployeeImage
                    src={item.image}
                    alt={`${item.first_name}${item.last_name}`}
                  />
                </ListLinkItem>
              ))
            )
        )
        : null}
    </div>
  );
}

实现说明 #

• 外层用flatMap遍历department.roles，替代原来的map，用来承接内层遍历生成的多组人员节点
• 内层遍历employeeTypes同样用flatMap，把每个类型对应的人员列表遍历结果合并到同一个数组中
• 给role[type]加了|| []的兜底逻辑，就算某个角色下没有supervisors或者employees字段，也不会因为调用map报错
• 原来拼接姓名的地方做了小优化，用模板字符串替代直接加号拼接，可读性更好

如果你需要按类型分组渲染（比如先列所有主管再列普通员工），只需要在内层遍历的时候加对应的分组标题节点即可，核心遍历逻辑不需要改动。

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