reactjs - 如果数组为空，则 react 表，不渲染

Question

我有 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
            }];
        }

Answer 1

如果您使用的是 npm 模块react-table

import ReactTable from 'react-table';
import "react-table/react-table.css";

然后只需将属性 minRows 设置为 0 来标记 ReactTable，如下面的代码所示，以停止渲染空行

<ReactTable data={tableDataArray} minRows={0} />