我有一张这样的table

function myComponent() {
       const rows = [some, data, from, http, request]
       const tableType = "rowForTable1"; // lets just say table1, but really this is dynamically retrived via http request.
    return (
    <div className={classes.root}>
          <Paper className={classes.paper}>
            <EnhancedTableToolbar numSelected={selected.length} />
            <TableContainer>
              <Table
             <TableBody>
                          {rows.map((row) => {             
                              {RowType(tableType.toLowerCase(), row).map((col) => { 
                                  console.log(col); // I can see the column values thru this
                                  <TableRow
                                    hover
                                    onClick={(event) => handleClick(event, row.name)}
                                    role="checkbox"
                                    aria-checked={isItemSelected}
                                    tabIndex={-1}
                                    key={row.name}
                                    selected={isItemSelected}
                                  >
                                    <TableCell key={col} align="right">{col}</TableCell> // BUT I CANNOT SEE THIS getting displayed in the page
                                  </TableRow>);
                              })}

                          })}
                        </TableBody>
            </Table>
         </TableContainer>
       </Paper>
    </div>
);
}

        function RowType(tableType, row) {
          const funcMap = 
             rowForTable1: [row.tabl1Col1, row.tabl1Col2, row.tabl1Col3],
             rowForTable2: [row.tabl2Col1, row.tabl2Col2, row.tabl2Col3],
          }

          return funcMap[tableType];
        }

行被传递到此表，并由rows.map进行迭代
因此，对于不同的http请求，有不同的表内容显示，因此我通过函数rowtype（TypeofTable和TheRow）使tablerow成为动态的
现在的问题是，我通过console.log（列）验证了第一次和第二次（内部）Map迭代是正确的，只是负责渲染 <TableRow> 不显示任何内容
有人知道如何正确地做到这一点吗？