Question

我能够从后端api获取数据，但是我的页面会在数据输入之前呈现。如何等待数据并使用api中的传入数据呈现页面？我在Mui数据表上显示数据。下面的代码显示了我的努力。预先感谢。

如何使用加载程序让页面在渲染之前等待数据？

PS：React-Redux初学者

组件

state = {
         indexColumns:{
         name:'',
         phone:'',
    },
        loading: false, // loading activity
         data: '124'
        }

componentDidMount()
 {
    this.getAllPatients();
 }

获取数据

 getAllPatients(){
   return this.fetchPatients().then(([response,json]) => {
      if(response.status === 200)
      {
         this.setState({
            indexColumns: Object.values(json.data.patients)
         })
      }
   })
}

fetchPatients(){
   const URL = 'http://domain:8000/api/?data_id='+this.state.data;
   return fetch(URL, {method:'GET',headers:new Headers ({
      'Accept': 'application/json',
      'Content-Type': 'application/json',
         })})
   .then(response => Promise.all([response, response.json()]));
}
render()
  {
     const data = [this.state.indexColums];
     <MUIDataTable
        title={}                
        data={                     
        data.map(item => {
        return [
        item.name,
         item.phone,
       ]
       }) }
        columns={Object.keys(data[0])}
        options={options}
        onClick={this.fetchSongDetails}             
                            />
       </MuiThemeProvider> 
  }

Answer 1

您不能停止调用已安装或将要安装的组件的render方法的反应（除非您不首先渲染它），但是您可以做的是渲染加载指示器，直到数据被获取。

首先，该状态下的加载应为

state = {
    // other state
    loading: true,
}

获取数据后，将加载设置为false

在组件的渲染方法中

render()
  {
     const data = [this.state.indexColums];

     return this.state.loading ? <div>loading</div> :
     <MUIDataTable
        title={}                
        data={                     
        data.map(item => {
        return [
        item.name,
         item.phone,
       ]
       }) }
        columns={Object.keys(data[0])}
        options={options}
        onClick={this.fetchSongDetails}             
                            />
       </MuiThemeProvider> 
  }

事实上，正如我所看到的，您不需要其他状态，您可以从数据null开始，当data为null时渲染加载程序，在获取数据时将数据设置为获取的数据，并且在有数据时渲染表

数据加载之前发生渲染-React Redux

1 个答案: