Javascript 材料界面<;TableCell>;组件不会动态呈现数据集
我正在尝试创建一个表组件,该组件基于数据集动态呈现项目列表。表格组件由Javascript 材料界面<;TableCell>;组件不会动态呈现数据集,javascript,reactjs,material-ui,Javascript,Reactjs,Material Ui,我正在尝试创建一个表组件,该组件基于数据集动态呈现项目列表。表格组件由和组成,我使用.map()动态创建赋值给组件 const data = [{ new_cases: 100, total_cases: 200, province: 'Ontario' }, { new_cases: 300, total_cases: 400, province: 'Edmonton' }] const Cus
和
组成,我使用.map()
动态创建赋值给
组件
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;
{Object.values(row.map)(column=>console.log(column))}
//返回100200,“安大略”,300400,“埃德蒙顿”
您可能需要将forEach
更改为map
{data.forEach(row => (
到
<TableRow>
{Object.values(row).map(column => console.log(column))}
</TableRow>
//returns 100, 200, 'Ontario', 300, 400,'Edmonton'
{data.forEach(row => (
{data.map(row => (