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

引导表似乎需要有非空数据才能正常工作。那么如何让table等待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 调用完成后才会呈现该表。

记录此功能的发行说明是 HERE .