我有 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} />
响应表 它接收一个对象数组并将数据呈现到表中...
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>
);
}
}
修复 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} />
关于reactjs - 如果数组为空,则 react 表,不渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50491257/