在填充数据之前 React Antd 表渲染答案

【问题标题】：React Antd table rendering before data is populated在填充数据之前 React Antd 表渲染
【发布时间】：2020-08-05 22:24:37
【问题描述】：

我是新手，我正在尝试通过我的 api 调用填充 ant 设计表组件，但似乎在 api 调用可以完成抓取数据之前表格呈现。我尝试了一些条件渲染，但这似乎没有帮助。任何有关如何解决此问题的帮助将不胜感激。

import React from 'react';
import PropTypes from 'prop-types';
import { Table } from 'antd';
import { workOrdersTicketsService } from '../../../../services';
import { dispatchTicketColumns } from '../../../../common/utils/grid-columns';

class DispatchTicketTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      id: 0,
      loading: true,
    };
  }

  componentDidMount() {
    if (this.props.id > 0 && this.state.id !== null) {
      this.getDispatchTickets();
    }
  }

  componentDidUpdate(prevProps) {
    if (prevProps !== null && this.props.id !== null
      && prevProps.id !== this.props.id) {
      this.getDispatchTickets();
    }
  }

  getDispatchTickets() {
    workOrdersTicketsService.get(this.props.id).then((result) => {
      console.log(result);
      this.setState({
        data: result.value,
        loading: false,
      });
    });
  }

  render() {
    return (
      <Table id={this.props.id} columns={dispatchTicketColumns} dataSource={this.state.data} pagination={false} size="small" />
    );
  }
}

DispatchTicketTable.propTypes = {
  id: PropTypes.number,
};

DispatchTicketTable.defaultProps = {
  id: 0,
};

export { DispatchTicketTable as default };

【问题讨论】：

标签： reactjs render antd

【解决方案1】：

除非表格似乎在 api 调用完成抓取数据之前呈现

如果您的问题是您的表格将在加载完成之前呈现，它应该可以工作：

  render() {
    return (this.state.loading ? (<div>loading</div>) : (
      <Table id={this.props.id} columns={dispatchTicketColumns} dataSource={this.state.data} pagination={false} size="small" />
    ));
  }

如果它不起作用，那么问题出在其他地方。

【讨论】：

【解决方案2】：

你可以试试这样的

render() {
  if (this.state.loading) {
    return null;
  }
  return (
    <Table id={this.props.id} columns={dispatchTicketColumns} dataSource={this.state.data} pagination={false} size="small" />
  );
}

render() 方法允许返回 null，它只是不渲染任何东西，而不是渲染一个空表

【讨论】：