reactjs - 如果数组为空,则反应表,不渲染
问题描述
我有 4 个从 API 获取数据的数组,然后我用这些数组渲染 4 个表,这里的问题是,如果其中一个数组为空(后端没有数据),所有表都不会渲染..
completedIssues: []
issuesNotCompletedInCurrentSprint: []
puntedIssues: []
issuesCompletedInAnotherSprint: []
const filteredIssuesCompletedInAnotherSprint = this.state.issuesCompletedInAnotherSprint.map(item => (
{
assignee: item ? item.assigneeName : 'Empty',
id: item ? item.id : 'Empty',
key: item ? item.key : 'Empty',
type: item ? item.typeName : 'Empty',
summary: item ? item.summary : 'Empty',
}
));
<ResponseTable data={filteredCompletedIssues} />
<ResponseTable data={filteredIssuesNotCompletedInCurrentSprint} />
<ResponseTable data={filteredPuntedIssues} />
<ResponseTable data={filteredIssuesCompletedInAnotherSprint} />
ResponseTable 它接收一个对象数组并将数据渲染到表中......
import React from 'react';
import ReactTable from 'react-table';
import "react-table/react-table.css";
export default class ResponseTable extends React.Component {
constructor(props) { // Use Props
super(props); // Use Props
this.columnsBuilder = this.columnsBuilder.bind(this);
}
columnsBuilder () { //Remove data
if(this.props.data == 0){
return
}
const props = Object.keys(this.props.data[0]); //Use Props
const columns = props.map( (item, index) => ({
Header : item,
accessor : item,
}));
const built = [
{
Header : this.props.header,
columns,
},
];
return built;
}
render() {
return (
<div>
<ReactTable
data={this.props.data}
columns={this.columnsBuilder()} // Remove Props
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
</div>
);
}
}
FIX ResponseTable columnsBuilder()
if(this.props.data.length === 0) {
return [{
Header : this.props.header
}];
}
解决方案
如果您使用的是 npm 模块react-table
import ReactTable from 'react-table';
import "react-table/react-table.css";
然后只需将属性minRows设置为 0 来标记 ReactTable 就像下面的代码一样停止渲染空行
<ReactTable data={tableDataArray} minRows={0} />
推荐阅读
- css - 制作锁子甲背景主题
- c++ - jrtplib-3.11.1 为什么遍历所有fd而不是数据可读的fd?
- sql - 如何在 postgresql 中取消 SQL 查询“更新”
- ios - 如何在 iOS 中使用 Swift 运行命令行命令或任务?
- asp.net-mvc - 无法在 chrome/fire fox 中运行我的 MVC 应用程序:
- javascript - 如何使用烧瓶访问使用javascript添加到我的html页面的段落?
- excel - 仅将表格列中的可见单元格复制到Excel VBA中用逗号分隔的一列,循环
- wordpress - 为什么 Wordpress 在其他 DNS 中不起作用
- ruby-on-rails - 如何修复“致命:无法查找 https(端口 9418)(不知道这样的主机)
- python - 在 python 类中动态添加对算术魔术函数的支持