Material UI <TableCell> 组件不会动态渲染数据集答案

【问题标题】：Material UI <TableCell> component does not dynamically render datasetMaterial UI <TableCell> 组件不会动态渲染数据集
【发布时间】：2020-04-28 06:04:09
【问题描述】：

我正在尝试创建一个基于数据集动态呈现项目列表的表格组件。 Table组件由<TableHead/>和<TableBody/>组成，我使用.map()动态创建赋值给<TableCell/>组件。

const data = [{
      new_cases: 100,
      total_cases: 200,
      province: 'Ontario'
    }, 
    {
      new_cases: 300,
      total_cases: 400,
      province: 'Edmonton'
    }]

const CustomTable = () => {
    const tableHead = Object.getOwnPropertyNames(data[0]);

   return (
    <TableContainer>
        <TableHead>
            <TableRow>
                {tableHead.map(name => <TableCell>{name}</TableCell>)}
            </TableRow>
        </TableHead>
        <TableBody>
                {data.forEach(row => (
                    <TableRow>
                        {Object.values(row).map(column => (
                            <TableCell>{column}</TableCell>
                        ))}
                    </TableRow>)
                )}
            </TableBody>
      <TableContainer>
    );
};

export default CustomTable;

但是，问题在于包裹在<TableBody/> 中的<TableCell/> 不显示column 值。奇怪的是，当我console.log(column) 时，它会正确返回属性值我错过了什么吗？

<TableRow>
    {Object.values(row).map(column => <TableCell>{column}</TableCell>)}
</TableRow>)
//TableCell is not rendered.

<TableRow>
    {Object.values(row).map(column => console.log(column))}
</TableRow>
//returns 100, 200, 'Ontario', 300, 400,'Edmonton'

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

您可能希望将forEach 更改为map。

{data.forEach(row => (

到

{data.map(row => (

【讨论】：