set state and access updated state in a same function

Question

How can we access updated states in the same function?

state = {
    a: 1,
    b: 2,
  };

  updateState = () => {
    const { a, b } = this.state;

    console.log("previous a", a);
    console.log("previous b", b);

    this.setState({ a: b, b: 3 });

    console.log("New a", a); <-- getting previous value here
    console.log("New b", b); <-- getting previous value here

  };

is it possible to get a new value in the same function?

async and await are not working here. function method where we apply function as a 2nd parameter to the setstate is not working for the whole application.

please do not flag this question.

You cannot do it because of how react works. State updates are async. What is the need to do this? You might want to recheck your approach. Add that to the question and you will get a suitable way to amendit — Tushar Shahi, Aug 30 '21 at 12:14
`this.state.a` is always the previous/current value. Whatever you want to set with `setState` is the next/new value. Pick whichever you want. — windmaomao, Aug 30 '21 at 12:14
i've used something like `this.state.a = this.state.b` `this.state.b = 3` but getting the warning here do not mutate the state instead uses setstate. — Diwanshu Tyagi, Aug 31 '21 at 03:24

Giovanni Esposito · Answer 1 · 2021-08-31T06:52:13.750

2

You could use this.setState's callback in this way:

state = {
    a: 1,
    b: 2,
  };

  updateState = () => {
    const { a, b } = this.state;

    console.log("previous a", a);
    console.log("previous b", b);

    this.setState({ a: b, b: 3 }, () => {
       console.log("New a", this.state.a);
       console.log("New b", this.state.b);
    });
  };

EDIT to print new state values you could use also componentDidUpdate in this way:

componentDidUpdate(prevProps, prevState) {
  if (prevState.a !== this.state.a) {
    console.log("New a", this.state.a);
  }
  if (prevState.b !== this.state.b) {
    console.log("New b", this.state.b);
  }
}

edited Aug 31 '21 at 06:52

answered Aug 30 '21 at 12:14

Giovanni Esposito

10,696
1
14
30

this functionality i've applied on a component. although it does work but not for the whole application... I've got to know componentDidUpdate() is used for this. did anyone know how componentDidUpdate() method applied here? – Diwanshu Tyagi Aug 31 '21 at 03:21
@DiwanshuTyagi I updated my answer with `componentDidUpdate` case. – Giovanni Esposito Aug 31 '21 at 06:53

score -1 · Answer 2 · answered Aug 30 '21 at 12:23

you are using a local constant variable whose value is not changed. so if you want to use updated value use this.state.a and this.state.b for respective value.

  state = {
    a: 1,
    b: 2,
  };

  updateState = () => {
    const { a, b } = this.state;

    console.log("previous a", a);
    console.log("previous b", b);

    this.setState({ a: b, b: 3 });

    console.log("New a", a); <-- getting previous value here  // problem is here
    console.log("New b", b); <-- getting previous value here  // problem is here
    //replace above code with below code 
    console.log("New a", this.state.a);  //replace with this code.
    console.log("New b", this.state.b); //replace with this code

  };

set state and access updated state in a same function

2 Answers2