React - Sequence of methods

Question

I have written following code to get current user group Ids and later from that Ids I wanted to filter data from SharePoint list. First I want to execute

ServiceManager.getRemoteService().getCurrentUserGroups()

method. Once I get group Ids, I want to execute the next method. But unfortunately filter part of the REST query is blank because

this.groupIdString

is blank. This may be because both methods are executed same time. I'm new to React and I want to know is there any best approach to manage this scenario. Basically I want to execute the methods in the order I write.

public componentDidMount() {
    this.groupIdString= "";
    ServiceManager.getRemoteService().getCurrentUserGroups(this.props.siteUrl, "/_api/web/currentuser/groups").then((value) => {
                if (value[0]) {
                  for (let i: number = 0; i < value.length; i++) {
                     if(value[i].Id != undefined){
                      this.groupIdString += "(UserGroupsId eq " + value[i].Id.toString()+")"; 
                     }
                  }
                }
              });
    const restQuery = "/_api/Web/Lists/GetByTitle('Weather')/Items?$select=Title,NewsBody,UserGroupsId&$filter=("+this.groupIdString+")";

    ServiceManager.getRemoteService().getWeatherListItems(this.props.siteUrl, restQuery).then((value) => {
                if (value[0]) {
                    //code
                }
              });
}

Answer 1

Asynchronous requests need to pay attention to the order of the requests.The second request should be written in then function.

public componentDidMount() {
    this.groupIdString = "";
    ServiceManager.getRemoteService().getCurrentUserGroups(this.props.siteUrl, "/_api/web/currentuser/groups").then((value) => {
        if (value[0]) {
            for (let i: number = 0; i < value.length; i++) {
                if (value[i].Id != undefined) {
                    this.groupIdString += "(UserGroupsId eq " + value[i].Id.toString() + ")";
                }
            }
        }
        const restQuery = "/_api/Web/Lists/GetByTitle('Weather')/Items?$select=Title,NewsBody,UserGroupsId&$filter=(" + this.groupIdString + ")";

        ServiceManager.getRemoteService().getWeatherListItems(this.props.siteUrl, restQuery).then((value) => {
            if (value[0]) {
                //code
            }
        });
    });

}