ReactJS: setState() value is rendering in console.log but not updating in state

Question

Here I am getting small issue with setState() . I know this setState() is an asynchronous function. I have gone some example from SO example as well and I am getting my value in console.log() but this same is not updating in state.

What should I need to change here to get the updated state() value. Any suggestion for me please.

Here in my code on tab change the state value should be updated for form submission.

//Code

handleOnSubmitJoinUS(e) {
    e.preventDefault();
    const { name,  phone, email, comment, activeTab } = this.state;

    if (activeTab == 0 ) {

        this.setState({comment: "Message for : Becoming a team member"}, () => {
            console.log(this.state.comment);
        });

    } else if (activeTab == 1) {
        this.setState({comment: "Message for : Becoming a Vendor Partner"}, () => {
            console.log(this.state.comment);
        });

    } else {
        this.setState({comment: "Message for : Becoming a Designer Associates"}, () => {
            console.log(this.state.comment);
        });
    }
    
    
    const sendingMsgData = {
        name,  phone, email, comment
    }

    //attempt to login
    if (sendingMsgData.email && sendingMsgData.name && sendingMsgData.phone  != null  ) {
        this.setState({msg : "Thank you! we recieved your submission successfully, we will surely contact you within 24 hours"});
        window.setTimeout(function(){window.location.reload()}, 1000);
    } 
    this.props.sendingConsultation(sendingMsgData);
    
}

try this callback instead of window.setTimeout https://stackoverflow.com/a/45186956/9277453 — Alexey Nikonov, Jul 28 '20 at 19:58
You should put attempt to login code in setState callback functions where you console.log the values. Otherwise your attempt to login code will run before updating the values. — Çağatay Sel, Jul 28 '20 at 19:59
@AlexNikonov thank you for your time. sure I will chekc this as well. — Tammy, Jul 28 '20 at 20:06

score 2 · Accepted Answer · answered Jul 28 '20 at 19:59

As you said, setState is asynchronous, so the rest of the function continues running, doing all that message sending and so on before the state is actually set in this.state. For your original code, that'd mean the rest of the code should be in that post-setState callback.

However, it doesn't look like comment needs to be in the state at all, since you're deriving it from state.activeTab:

handleOnSubmitJoinUS(e) {
  e.preventDefault();
  const { name, phone, email, activeTab } = this.state;
  let comment;

  if (activeTab == 0) {
    comment = "Message for : Becoming a team member";
  } else if (activeTab == 1) {
    comment = "Message for : Becoming a Vendor Partner";
  } else {
    comment = "Message for : Becoming a Designer Associates";
  }

  const sendingMsgData = {
    name,
    phone,
    email,
    comment,
  };

  //attempt to login
  if (sendingMsgData.email && sendingMsgData.name && sendingMsgData.phone != null) {
    this.setState({ msg: "Thank you! we recieved your submission successfully, we will surely contact you within 24 hours" });
    window.setTimeout(function () {
      window.location.reload();
    }, 1000);
  }
  this.props.sendingConsultation(sendingMsgData);
}

If you do really need it in state for some reason, you can do a this.setState({comment}) at the end.

Ohhh @AKX thank you so much. I got your point. thank you. – Tammy Jul 28 '20 at 20:05 — Tammy, Jul 28 '20 at 20:05

ReactJS: setState() value is rendering in console.log but not updating in state

1 Answers1