如何迭代JSON对象内的嵌套数组，实现姓名字段与角色描述配对输出

现有代码存在两处核心问题：

• 属性访问路径错误：involvementRole数组的子元素直接挂载involvementRoleDescription属性，你多写了一层involvementRole，导致读取不到对应值
• 遍历层级错误：你现在是按外层的客户对象遍历，每个客户只生成1行，无法实现「一个客户对应多个角色就生成多行」的需求，需要两层遍历先把所有「姓名+角色」的条目展开

修改后的代码如下：

const Checkbox = (props) => {
  const classes = useStyles();
  // 先展开所有姓名-角色配对条目
  const checkbox = props.list.flatMap(clientItem => 
    // 遍历当前客户的所有角色，每个角色单独生成一行
    clientItem.involvementRole.map(role => (
      <div key={role.involvementRoleId}>
        <tbody style={{ width:'100%' }}>
          <tr>
            <td style={{width:'60px'}}>
              <input type="checkbox" onClick={() => props.handleCheckboxChange(clientItem)} />
            </td> 
            <td style={{width:'250px'}}>
              {role.involvementRoleDescription}
            </td>  
            <td style={{width:'250px'}}>
              {clientItem.client.firstName + ' ' + clientItem.client.lastName}
            </td>
          </tr>
        </tbody>
      </div>
    ))
  );
  // 补充返回渲染内容
  return <>{checkbox}</>
}

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