javascript - Async await on rendering component react

Question

the js code below performs the loading of a series of fields remotely and then displays them on a map, the problem is that it calls it does not wait for the await and I proceed so the data is not displayed on the map which is redirected by the component , how can I do to make the chaima wait for the response of the function before proceeding to render the map

import {getmarcaturegiornaliere} from "module.js";

MyComponent.js

  class Am4chartMap extends Component {

    async componentDidMount() {
      let map = am4core.create("map", am4maps.MapChart);
    //Load values from response this function->
    var marcature=await getmarcaturegiornaliere();       
    
    map.geodata = am4geodata_usaHigh;
    map.percentHeight = 90;
    map.dy = 10;
    let polygonSeries = map.series.push(new am4maps.MapPolygonSeries());
    polygonSeries.useGeodata = true;
    map.homeZoomLevel = 1.2;
    map.zoomControl = new am4maps.ZoomControl();
    map.zoomControl.layout = 'horizontal';
    map.zoomControl.align = 'left';
    map.zoomControl.valign = 'bottom';
    map.zoomControl.dy = -10;
    map.zoomControl.contentHeight = 20;
    map.zoomControl.minusButton.background.fill = am4core.color("#C7D0FF");
    map.zoomControl.minusButton.background.stroke = am4core.color("#6979C9");
    map.zoomControl.minusButton.label.fontWeight = 600;
    map.zoomControl.minusButton.label.fontSize = 22;
    map.zoomControl.minusButton.scale = .75;
    map.zoomControl.minusButton.label.scale = .75;
    map.zoomControl.plusButton.background.fill = am4core.color("#C7D0FF");
    map.zoomControl.plusButton.background.stroke = am4core.color("#6979C9");
    map.zoomControl.plusButton.label.fontWeight = 600;
    map.zoomControl.plusButton.label.fontSize = 22;
    map.zoomControl.plusButton.label.align = "center";
    map.zoomControl.plusButton.scale = .75;
    map.zoomControl.plusButton.label.scale = .75;
    map.zoomControl.plusButton.dx = 5;
    let plusButtonHoverState = map.zoomControl.plusButton.background.states.create("hover");
    plusButtonHoverState.properties.fill = am4core.color("#354D84");
    let minusButtonHoverState = map.zoomControl.minusButton.background.states.create("hover");
    minusButtonHoverState.properties.fill = am4core.color("#354D84");
    let polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.tooltipText = "{name}";
    polygonTemplate.fill = am4core.color("#474D84");
    polygonTemplate.stroke = am4core.color("#6979C9")
    let hs = polygonTemplate.states.create("hover");
    hs.properties.fill = am4core.color("#354D84");
    let citySeries = map.series.push(new am4maps.MapImageSeries());
    citySeries.data = marcature;
    citySeries.dataFields.value = "size";
    let city = citySeries.mapImages.template;
    city.nonScaling = true;
    city.propertyFields.latitude = "latitude";
    city.propertyFields.longitude = "longitude";
    let circle = city.createChild(am4core.Circle);
    circle.fill = am4core.color("#C7D0FF");
    circle.strokeWidth = 0;
    let circleHoverState = circle.states.create("hover");
    circleHoverState.properties.strokeWidth = 1;
    circle.tooltipText = '{tooltip}';
    circle.propertyFields.radius = 'size';

    this.map = map;    
  }

  componentWillUnmount() {
    if(this.map) {
      this.map.dispose();
    }
  }

  render() {,.

module.js

//Setup server
import server from "./settings";
//Rest call axios module
const axios = require('axios').default;

export function getmarcaturegiornaliere() {

    var date="03-02-2021";
    console.log("Data: "+date);
    var listmarcature=[];

    axios.post(server.url+'/Utente/CaricamentoStoricoGiornonaliero', {
        Data: date,
        IdUtente: '3',
        CalcoloOreGiornaliere: true
      })
      .then(function (response) {
        console.log("Response: "+response.data);
        //Vado ad iterare la response
        let data = response.data;
        for (let index in data){
          console.log("Stato: "+data[index].Longitudine);
          var datatemp={
            "latitude" : data[index].Latitudine,
            "longitude" : data[index].Longitudine,
            "size" : 5,
           "tooltip" : data[index].Stato,
          };
          listmarcature.push(datatemp);
        }
       
        }).catch(function (error) {
          console.log("Errore: "+error);
      });

      return listmarcature;
   

}

question from:https://stackoverflow.com/questions/66059799/async-await-on-rendering-component-react

Answer 1

Your function getmarcaturegiornaliere is not async, and this is the problem. It will always return you an empty array [], because the return listmarcature; is executed before the .then() is. Therefore you return an empty array, and somewhere in the future the .then() will happen (and it will do nothing because you already returned).

The solution would be: Make it async.

There are some syntaxes available for that, I will bring you the best for this case:

1. Put async in the funciton: export async function getmarcaturegiornaliere() {
2. Add await before the axios call: await axios.post(...)