ReactJS: state not updated after setState and callback

Question

this are my initial state:

this.state = {
  requiredError: false,
  addressSelectError: false,
  recipientError: false,
  open: false,
};

and this is where my problem is:

processCheckout () {
    this.setState({
      requiredError: true, 
      addressSelectError: true,
      recipientError: true,
    }, () => {
      console.log('required error', requiredError);
      console.log('address error', addressSelectError);
      console.log('recipient error', recipientError);
    })
}

I have set them all to true but the console still logs false:

I have used the callback but it still does not change. any help?

I am calling the processCheckout() function on onClick() of a button.

EDIT: I have tried console logging in render, and all of them are true

Can you show the full code of where you are updating the state — Tiisetso Tjabane
– Tiisetso Tjabane, Commented Apr 13, 2019 at 4:59
Where have you defined requiredError, addressSelectError and recipientError? — henrik123
– henrik123, Commented Apr 13, 2019 at 5:13

Tiisetso Tjabane · Accepted Answer · 2019-04-13 05:12:24Z

2

Change your function to an arrow syntax so it has access to the global state.

processCheckout= () => {
    this.setState({
      requiredError: true, 
      addressSelectError: true,
      recipientError: true,
    }, () => {
      console.log('required error', this.state.requiredError);
      console.log('address error', this.state.addressSelectError);
      console.log('recipient error', this.state.recipientError);
    })

Or bind it at the constructor like

constructor(props) {
    super(props);

    // This binding is necessary to make `this` work
    this.processCheckout = this.processCheckout.bind(this);
  }

You can read more about it here

edited Apr 13, 2019 at 5:12

answered Apr 13, 2019 at 5:03

Tiisetso Tjabane

2,1062 gold badges20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

eibersji Over a year ago

I have tried console logging in render, and all of them are true but at the console log at the callback it is not reflected

henrik123 · Accepted Answer · 2019-04-13 05:24:31Z

1

Without seeing the entire code I assume you've declared the variables requiredError, addressSelectError and recipientError somewhere in your class:

In the callback, try to access this.state directly

processCheckout() {

    this.setState(
      {
        requiredError: true,
        addressSelectError: true,
        recipientError: true
      },
      () => {
        console.log("required error", this.state.requiredError);
        console.log("address error", this.state.addressSelectError);
        console.log("recipient error", this.state.recipientError);
      }
    );
  }

answered Apr 13, 2019 at 5:24

henrik123

1,69313 silver badges20 bronze badges

2 Comments

eibersji Over a year ago

I have declared them like this const { requiredError, addressSelectError, recipientError } = this.state; before the setState and I thought that's the same. but when I tried your answer it works, why is that? and also thanks!

henrik123 Over a year ago

When you declare const { requiredError, addressSelectError, recipientError } = this.state; in your processCheckout method they reference the state at the current state. In this case requiredError, addressSelectError, recipientError are all false since they are defined false in your constructor method.

Collectives™ on Stack Overflow

ReactJS: state not updated after setState and callback

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related