Reactjs 由于加载数据有时需要在我的UI中进行，我对初始结果进行了硬编码以避免出现空白屏幕，我们是否有适当的解决方案？

我创建了一个印度政府的基于数据库的API前端，在t=0时，屏幕显示空白，因为有时API显示延迟的结果，所以现在作为一个临时解决方案，我为这种情况硬编码了数据，我正在寻找一个合适的解决方案

const dataa=[
  {
    "cured": 1,
    "deaths": 1,
    "noOfCases": 161,
    "state": "Andhra Pradesh"
  },
  {
    "cured": 0,
    "deaths": 0,
    "noOfCases": 10,
    "state": "Andaman and Nicobar Islands"
  }
]
function createData(State, cases, Cured,Deaths) {
  return { State, cases, Cured,Deaths};
}
let totalcases=0;
let totalcures=0;
let totaldeath=0;
let rows = [];
dataa.map(item=>{
  totalcases+=parseFloat(item.noOfCases);
  totalcures+=parseFloat(item.cured);
  totaldeath+= parseFloat(item.deaths);
  rows.push(createData(item.state, item.noOfCases, item.cured,item.deaths))
});
class App extends Component {
  state={
    data:[]
}
componentDidMount() {

      const url='https://covid-india-cases.herokuapp.com/states/';
    fetch(url)
    .then(response => response.json())
    .then(data => this.setState({ data }))
  }

  render(){
    function createData(State, cases, Cured,Deaths) {
      return { State, cases, Cured,Deaths};
    }
    let totalcasesAPI=0;
    let totalcuresAPI=0;
    let totaldeathAPI=0;
    let rowsAPI = [];
    this.state.data.map(item=>{
      totalcasesAPI+= parseFloat(item.noOfCases);
      totalcuresAPI+= parseFloat(item.cured);
      totaldeathAPI+= parseFloat(item.deaths);
      rowsAPI.push(createData(item.state, item.noOfCases, item.cured,item.deaths))
    });
    rows=(rowsAPI.length==0)?rows:rowsAPI;
    totalcases=(totalcasesAPI===0)?totalcases:totalcasesAPI;
    totalcures=(totalcuresAPI===0)?totalcures:totalcuresAPI;
    totaldeath=(totaldeathAPI===0)?totaldeath:totaldeathAPI;

尝试使用承诺（异步/等待）