使用ajax数据反应引导表

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调用完成该表将只被渲染。

发行说明记录此功能是HERE。

Answer 2

尝试像这样渲染（），

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