Question

我有4个从API获取数据的数组，然后我用这些数组渲染4个表，问题是，如果其中一个数组为空（后端没有数据），则所有表都不会呈现.. < / p>

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

Answer 1

您可以在父容器中执行此操作

{
  filteredCompletedIssues.length && <ResponseTable data={filteredCompletedIssues} />
}

或者您可以在ResponseTable组件

中进行长度检查

render({data = []}) {

    if (!data.length) {
      return null;
    }

    return (

所以你的例子会变成：

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() {
        let { data = [] } = this.props;
        
        if(!data.length)
          return null;

        return (
            <div>
                <ReactTable
                    data={data}
                    columns={this.columnsBuilder()} // Remove Props
                    defaultPageSize={10}
                    className="-striped -highlight"
                />
                <br />
            </div>
        );
    }
}

Answer 2

如果您使用的是npm模块反应表

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

然后只需将属性 minRows 设置为0，以标记ReactTable，如下面的代码即可停止呈现空行

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

React Table如果Array为空，则不呈现

2 个答案: