javascript - 使用 ajax 数据反应 Bootstrap 表

Question

我正在使用 react-bootstrap-table 来显示一些数据，这些数据来自 ajax 结果。

constructor() {
    super();
    this.state = {
        data:[]
    };
}
componentDidMount() {
    this.loadData()
}

loadData() {
    $.ajax({
          url: 'url',
          dataType: 'json',
          success: function(data) {
              this.setState({data: data});
          }.bind(this)
        });
}
render() {
    return (
      <BootstrapTable data={this.state.data}>
          <TableHeaderColumn dataField="status">STATUS</TableHeaderColumn>
          <TableHeaderColumn dataField="title" isKey={true}>TITLE</TableHeaderColumn>
          <TableHeaderColumn dataField="type">TYPE</TableHeaderColumn>
          <TableHeaderColumn dataField="start">test</TableHeaderColumn>
          <TableHeaderColumn dataField="end">END</TableHeaderColumn>
          <TableHeaderColumn dataField="days used">DAYS USED</TableHeaderColumn>
      </BootstrapTable>
    );
}

这是行不通的，但是如果我把一些真实的数据放进去，它就会起作用，就像这样：

constructor() {
    super();
    this.state = {
      data:[{id:1,name:"name"}]
    };
  }

似乎引导表需要具有非空数据才能使其工作。那么如何让表格等待ajax完成然后抓取数据呢？

Answer 1

在这些情况下我通常会做什么：

render() {
  if(this.state.data.length == 0) { return null; }

  return(
    <BootstrapTable data={this.state.data}>
        <TableHeaderColumn dataField="status">STATUS</TableHeaderColumn>
        <TableHeaderColumn dataField="title" isKey={true}>TITLE</TableHeaderColumn>
        <TableHeaderColumn dataField="type">TYPE</TableHeaderColumn>
        <TableHeaderColumn dataField="start">test</TableHeaderColumn>
        <TableHeaderColumn dataField="end">END</TableHeaderColumn>
        <TableHeaderColumn dataField="days used">DAYS USED</TableHeaderColumn>
    </BootstrapTable>
  )
}

这意味着最初将返回一个空元素，并且只有在 AJAX 调用完成后才会呈现表格。

记录此功能的发行说明在这里。

Answer 2

在 render() 中尝试这样，

if(this.state.data!= undefined && this.state.data.length > 0) {
return (
<div className = 'container'>
<BootstrapTable data={this.state.data} condensed={true}>
.
.
.
</BootstrapTable>
</div>
);
}else{
return(
<p>No Data!</p>
);