Реагировать на рендеринг таблицы Antd до заполнения данных - PullRequest
Новая
       152

Реагировать на рендеринг таблицы Antd до заполнения данных

0 голосов
/ 06 августа 2020

Я новичок в реакции, и я пытаюсь заполнить компонент таблицы дизайна муравьев с помощью моего вызова api, за исключением того, что кажется, что таблица отрисовывается до того, как вызов api может завершить sh захват данных. Я попытался выполнить условный рендеринг, но это не помогло. Приветствуется любая помощь в том, как это исправить. 

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

Ответы [ 2 ]

0 голосов
/ 06 августа 2020

Вы можете попробовать что-то вроде этого 

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, который просто ничего не отображает вместо отображения пустой таблицы

0 голосов
/ 06 августа 2020

за исключением того, что кажется, что таблица отрисовывается до того, как вызов api может завершить sh захват данных

Если ваша проблема в том, что ваша таблица будет отображаться до завершения загрузки, она должна работать : 

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

если не работает, значит проблема в другом месте.

...