在填充数据之前进行React Antd表渲染

Question

我是一个新手，我正试图通过我的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 };

Answer 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" />
));
}

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

Answer 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，它只是不呈现任何内容，而不是呈现一个空表