SharePoint Online press Button and wait until setState variable has been updated

Question

I have a Button. This will be clicked and get the value of a counter. This counter values are set to the state variable. After that I want to update the counter with a new number. My problem is that the state variable is not updated in time when I wanted to update the counter.

How can I wait until the state variables are updated?

Here is my code so far:

At first I click the Button:

<div><PrimaryButton text="Create Update and TS Item" onClick={()=>this.CreateAndUpdateTS()}/></div>

Then I call another function which get the values of the counter:

private CreateAndUpdateTS(){

     this.getCounterValue()
      
  

    console.log("NewID: "+this.state.counterOldID);
    console.log("ID: "+this.state.counterID);

    let TSID = this.state.counterID;
    console.log("ID 2: "+TSID);

    let counterAdd =1;
    let counterOld = this.state.counterOldID;
    let counterNew = counterOld + counterAdd;
    console.log("ID"+ this.state.counterID +" CounterNew"+counterNew);

    this._spDataProvider.CounterUpdate("Counter",this.state.counterID,counterNew);

  }

But I always get the wrong values after I called this.counterValue(). I need to wait until the state is updated. How can I do that?

Answer 1

Try something like this:

private CreateAndUpdateTS(){
    this.getCounterValue()
}

private getCounterValue(): void {
    this._spDataProvider.ReadCounterValue("Counter").then((items)=>{  
        console.log("Counter Value: "+ JSON.stringify(items))
        console.log(items[0].NewId);
        this.setState(
            {
                counterID: items[0].NewId
            },
            this.updateCounterValue // your callback function
        )
    })
}

private updateCounterValue(): void {
    console.log("ID: " + this.state.counterID);

    let counterAdd = 1;
    let counterOld = this.state.counterID;
    let counterNew = counterOld + counterAdd;

    this._spDataProvider.CounterUpdate("Counter", this.state.counterID, counterNew);
}

Reference: How can I wait for setState to finish before triggering a function in React?