arrays - 使用 Material UI 映射数组
问题描述
不确定在使用 Material UI 表时从 axios 调用映射对象时是否有特殊规则?
const tableRows = this.props.reduxState.map(row => {
const {item_description, purchase_date, item_price, item_link} ={TableRowColumn}
return (
<Table>
<TableHeader>
<TableRow>
<TableHeaderColumn>Item Description</TableHeaderColumn>
<TableHeaderColumn>Date of purchase</TableHeaderColumn>
<TableHeaderColumn>Item Price</TableHeaderColumn>
<TableHeaderColumn>Link to item</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableRowColumn>{{item_description}}</TableRowColumn>
<TableRowColumn>{purchase_date}</TableRowColumn>
<TableRowColumn>{item_price}</TableRowColumn>
<TableRowColumn>{item_link}</TableRowColumn>
</TableRow>
</TableBody>
</Table>
);
});
解决方案
我已将您的代码格式化为可迭代的方式,
GetRows(){
const tableRows = this.props.reduxState.map(row => {
const {item_description, purchase_date, item_price, item_link} ={row}
return (
<TableRow>
<TableRowColumn>{{item_description}}</TableRowColumn>
<TableRowColumn>{purchase_date}</TableRowColumn>
<TableRowColumn>{item_price}</TableRowColumn>
<TableRowColumn>{item_link}</TableRowColumn>
</TableRow>
);
});
return tableRows;
}
.......
render(){
return(
<Table>
<TableHeader>
<TableRow>
<TableHeaderColumn>Item Description</TableHeaderColumn>
<TableHeaderColumn>Date of purchase</TableHeaderColumn>
<TableHeaderColumn>Item Price</TableHeaderColumn>
<TableHeaderColumn>Link to item</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
<this.GetRows/>
</TableBody>
</Table>
)
}
推荐阅读
- asp.net-core - ASP.NET Core 5.0 常规路由顺序是否依赖?
- python - 格式不匹配错误-无法将字符串数据转换为日期时间格式
- javascript - 如何根据另一个下拉列表值自动选择选项?
- visual-studio-code - 有没有办法将命令行参数传递给 vscode 自定义扩展?
- multithreading - 在MinGW环境下必须使用pthread库编译多线程程序吗?
- python - 检查数据框中的单元格值是否为字符串
- azure - Azure 函数的日志区域中缺少具有正确 LogLevel 的日志消息
- angular - Angular 11 反应式表单验证:开始日期小于结束日期
- spring - 从spring控制器返回一个新的thymeleaf页面片段和一些文件
- java - 如何处理 Webclient 对 HttpServletResponse 的响应?