Reactjs 如何在react引导表中添加react加载

我是react JS和react引导表的新手。我想在数据显示之前在我的react组件中添加react加载。因为数据显示时间太长了。但是不起作用

这是我的密码

import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import PageHeader from 'react-bootstrap/lib/PageHeader';
import database from './database';
import root from 'window-or-global';
import Loading from 'react-loading';

class User extends Component {
    constructor(props) {
    super(props);
    this.state = {
      text:'',
      products: []
    };

   this.userRef = database.ref('users');
  }

  componentDidMount() {
    this.userRef.on('value', this.gotData, this.errData); 
  }


  gotData = (data) => {
    let newProducts = []
    const userdata = data.val();
    const keys = Object.keys(userdata);
    for (let i = 0; i < keys.length; i++) {
      const k = keys[i];
      newProducts.push({
        name: userdata[k].nama, address: userdata[k].address, email: userdata[k].email
      });
    }
    this.setState({products : newProducts});
  }

  errData = (err) => {
   console.log(err);
 }

  handleClick = (rowKey) => {
    alert(this.refs.table.getPageByRowKey(rowKey));
  }

    render() {
    return (
      <div>
      <Loading type ='spinning-bubbles' color='#e3e3e3' />
          <div className="col-lg-12">
          <PageHeader>Members</PageHeader>
       </div>
        <BootstrapTable  
              ref='table'
            data={ this.state.products }
            pagination={ true }
            search={ true }>
          <TableHeaderColumn dataField='name' isKey={true} dataSort={true}>Name</TableHeaderColumn>
            <TableHeaderColumn dataField='address' dataSort={true}>Address</TableHeaderColumn>
            <TableHeaderColumn dataField='email'>Email</TableHeaderColumn>
          </BootstrapTable>
      </div>
    );
    }
}

export default User;

import React，{Component}来自'React'；
从“react bootstrap table”导入{BootstrapTable，TableHeaderColumn}；
从“react bootstrap/lib/PageHeader”导入PageHeader；
从“./数据库”导入数据库；
从“窗口或全局”导入根目录；
从“反应加载”导入加载；
类用户扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文本：“”，
产品：[]
};
this.userRef=database.ref（'users'）；
}
componentDidMount（）{
this.userRef.on（'value'，this.gotData，this.errData）；
}
gotData=（数据）=>{
让新产品=[]
const userdata=data.val（）；
const keys=Object.keys（userdata）；
for（设i=0；i{
控制台日志（err）；
}
handleClick=（行键）=>{
警报（this.refs.table.getPageByRowKey（rowKey））；
}
render（）{
返回(
成员
名称
地址
电子邮件
);
}
}
导出默认用户；

---

致以最良好的祝愿！希望回复。

为此，首先在

状态

中维护一个

bool

变量，该变量将跟踪是否获取数据，该

bool

的初始值将为

false

constructor(){
     super();
     this.state = {
        isDataFetched: false,
     }
}

现在有了一个属性

React Bootstrap Table

，

option

，用于设置默认值和自定义

节点文本

，您可以这样使用：

<BootstrapTable 
     ....
     options={tableOtions}>
</BootstrapTable>

let tableOtions = {
    noDataText: this._setTableOption(),
};

如果成功获取数据，则返回一些文本，如果数据为空，将显示这些文本，否则返回加载器：

_setTableOption(){ 
     if(this.state.isDataFetched){
           return "No expenses found";
      }else{
           return(
               <RefreshIndicator size={40} left={0} top={0} status="loading" style={{position: 'relative', margin: '0px auto'}}/>
           );
      }
}

---

请告诉我代码必须放在哪里…-（@Mayank shukla检查更新的答案，使用相同的代码，只需更换加载程序部分，即可工作：）

import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import PageHeader from 'react-bootstrap/lib/PageHeader';
import database from './database';
import root from 'window-or-global';
import Loading from 'react-loading';

class User extends Component {
    constructor(props) {
    super(props);
    this.state = {
      text:'',
      products: [],
      isDataFetched: false,
    };
    this.userRef = database.ref('users');
  }

  componentDidMount() {
    this.userRef.on('value', this.gotData, this.errData); 
  }


  gotData = (data) => {
    let newProducts = []
    const userdata = data.val();
    const keys = Object.keys(userdata);
    for (let i = 0; i < keys.length; i++) {
      const k = keys[i];
      newProducts.push({
        name: userdata[k].nama, address: userdata[k].address, email: userdata[k].email
      });
    }
    this.setState({products : newProducts, isDataFetched: true});
  }

  errData = (err) => {
    console.log(err);
  }

  handleClick = (rowKey) => {
    alert(this.refs.table.getPageByRowKey(rowKey));
  }

  _setTableOption(){ 
    if(this.state.isDataFetched){
      return "No expenses found";
    }else{
      return(
        <RefreshIndicator size={40} left={0} top={0} status="loading" style={{position: 'relative', margin: '0px auto'}}/>
      );
    }
  }

  render() {

    let tableOtions = {
        noDataText: this._setTableOption(),
    };

    return (
      <div>
        <Loading type ='spinning-bubbles' color='#e3e3e3' />
        <div className="col-lg-12">
          <PageHeader>Members</PageHeader>
        </div>
        <BootstrapTable  
          ref='table'
          data={ this.state.products }
          pagination={ true }
          search={ true }
          options={tableOtions}>
        >
          <TableHeaderColumn dataField='name' isKey={true} dataSort={true}>Name</TableHeaderColumn>
          <TableHeaderColumn dataField='address' dataSort={true}>Address</TableHeaderColumn>
          <TableHeaderColumn dataField='email'>Email</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

export default User;