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

似乎bootstrap表需要非空数据才能使其正常工作。那么如何让表等待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。

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

使用ajax数据重新启动Bootstrap表

2 个答案: