javascript - 材质界面组件不会动态呈现数据集
问题描述
我正在尝试创建一个基于数据集动态呈现项目列表的表格组件。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;
但是,问题是<TableCell/>
包装<TableBody/>
不显示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'
解决方案
您可能需要将 更改forEach
为map
。
{data.forEach(row => (
至
{data.map(row => (
推荐阅读
- sql - SQL 计数显示不同的名称,但不正确的匹配数
- node.js - 我们可以使用护照本地策略和护照谷歌策略来实现登录功能吗
- r - 在使用包含其名称的字符串引用数据框时更改数据框列名称
- glm - GLM Poisson 认为我的数据集中有负值,抛出错误
- node.js - 第二个中间件只在路由方法之后调用
- git - 无法将项目推送到 github
- mongodb - 如何记录无 SQL 数据库模型?
- javascript - 在 Python 中使用 jQuery 对 AWS lambda 函数的 Ajax 调用
- html - 使用 swift 动态创建 h1 标签
- python - 将元组插入空的熊猫数据框中