Javascript 在加载数据之前进行渲染-React Redux

我能够从我的后端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> 
  }

getAllPatients（）{
返回此.fetchPatients（）。然后（（[response，json]）=>{
如果（response.status==200）
{
这是我的国家({
indexColumns:Object.values（json.data.patients）
})
}
})
}
(){
常量URL=http://domain:8000/api/?data_id=“+this.state.data；
返回fetch（URL，{方法：'GET'，头：新头({
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
})})
.then（response=>Promise.all（[response，response.json（）]）；
}
render（）
{
const data=[this.state.indexColums]；
{
返回[
item.name，
项目.电话，
]
}) }
columns={Object.keys（数据[0]）}
选项={options}
onClick={this.fetchSongDetails}
/>
}

您不能停止调用已安装或将要安装的组件的呈现方法（除非您首先不呈现），但是您可以做的是在获取数据之前呈现加载指示器

首先，状态中的加载应该为true

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> 
  }

render（）
{
const data=[this.state.indexColums]；
返回此.state.loading？加载：
{
返回[
item.name，
项目.电话，
]
}) }
columns={Object.keys（数据[0]）}
选项={options}
onClick={this.fetchSongDetails}
/>
}

---

事实上，正如我所看到的，您不需要另一种状态，您可以从data null开始，当data为null时，呈现加载程序，当data被提取时，将data设置为提取的data，当您有数据时，呈现表

我看不到您在这里使用redux，如何将提取数据存储在redux中并将其传递给组件？提取数据是否是上述同一组件的一部分？否，提取数据不是componentreturn语句的一部分。