setState not maintaining set value after value set with Callback

Question

I'm working on an application where I multiple some values and use the sum on a computation a bit further. I quickly realized that this.setState wasnt working and I saw a callback being said to use a callback so I used this.setState({ estAlumTxt: estLBCarbonAl }, () => { however something strange is still happening. If I display the estAlumTxt variable in the console it's correct but if I display it lower down, it no longer has it's value set. This is my code.

calWasteCarbon = (event) => { 

    if (`${this.state.reAlumDrop}` === '1') {
        const estLBCarbonAl = (1 * -89.38);


         //this.setState({ estAlumTxt: estLBCarbonAl }
        this.setState({ estAlumTxt: estLBCarbonAl }, () => {
            console.log(this.state.estAlumTxt) // Returns the correct value set
        })        } else {
  
        this.setState({ estAlumTxt: 0 })
    }
    if (`${this.state.recPlasDrop}` === '1') {
        const estLBCarbonPlas = (1 * -35.56);
        this.setState({ estPlasTxt: estLBCarbonPlas })
    } else {
        this.setState({ estPlasTxt: 0 })
    }
    alert(this.state.estAlumTxt); //Alerted value is wrong.

Even if console.log reads out estAlumTxt correctly, the alert has it wrong. Gr

Does this answer your question? [Why is setState in reactjs Async instead of Sync?](https://stackoverflow.com/questions/36085726/why-is-setstate-in-reactjs-async-instead-of-sync) — David, Jul 06 '21 at 20:47
The main clue here is that the `alert` is happening *before* the `console.log`. The former happens immediately, the latter happens asynchronously after the state has been set. — David, Jul 06 '21 at 20:48
https://reactjs.org/docs/faq-state.html#why-is-setstate-giving-me-the-wrong-value — Benjamin, Jul 06 '21 at 20:50
@David I posted the question because despite using the callback I still don't get the desired results — Niana, Jul 07 '21 at 04:38

score 0 · Accepted Answer · answered Jul 06 '21 at 22:01

Calls to this.setState are asynchronous, meaning that they do not occur synchronously at the time they are called, but may occur at a later time.

This means, that while your function is executing, state.estAlumTxt hasn't been updated yet when you call the alert function.

Let's refactor your function a bit so that we only need to call setState once.

First lets extract those number consts out of the function, and I would advise putting them outside the component. There is no need to recalculate those consts every time the function is called.

Then lets create a stateChange variable where we can add the properties that we want to conditionally change. After we check the conditions, lets call setState, and alert the value of the stateChange.estAlumTxt

const estLBCarbonAl = 1 * -89.38;
const estLBCarbonPlas = 1 * -35.56;

calWasteCarbon = (event) => {
  const stateChange = {};

  if (`${this.state.reAlumDrop}` === '1') {
    stateChange.estAlumTxt = estLBCarbonAl;
  } else {
    stateChange.estAlumTxt = 0;
  }

  if (`${this.state.recPlasDrop}` === '1') {
    stateChange.estPlasTxt = estLBCarbonPlas;
  } else {
    stateChange.estPlasTxt = 0;
  }

  this.setState(stateChange);
  alert(stateChange.estAlumTxt);
};

setState not maintaining set value after value set with Callback

1 Answers1