Javascript 如何访问子映射（嵌套映射）中映射的父元素

我试图将传入的道具映射到一个功能组件，该组件将道具标题（标题数组）和数据（对象数组）映射到一个表中。我拥有的非功能代码是：

export default function DenseTable(props) {
  const classes = useStyles();

  return (
    <div className={classes.table}>
      <TableContainer component={Paper}>
        <Table className={classes.table} size="small" aria-label="a dense table">
          <TableHead>
            <TableRow>
              {props.headers.map(header => <TableCell align="left" >{header}</TableCell>)}
            </TableRow>
          </TableHead>
          <TableBody>
            {props.data.map((dataElement) => (
              <TableRow key={dataElement.symbol}>
                {Object.keys(dataElement).map(columnValue => <TableCell align="left" >{columnValue}</TableCell>)}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

导出默认函数DenseTable（道具）{
const classes=useStyles（）；
返回(
{props.headers.map（header=>{header}}
{props.data.map（（数据元素）=>(
{Object.keys（dataElement.map）（columnValue=>{columnValue}）}
))}
);
}

标题填充得非常完美，但是，我不确定如何正确嵌套映射，以便使用映射为属性访问器值的标题获取数据元素的列值。任何帮助都将不胜感激