React setState not updating

Question

handleSkipThisQuestionClicked = () => {
    const { answersDict, currentIndex, currentQuestionGroupId } = this.state;
    if (currentIndex < answersDict[currentQuestionGroupId].length - 1) {
        this.setQuestionDetails(answersDict[currentQuestionGroupId][currentIndex + 1]);
    } else {
        // set current index to 0 and increase the current group
        debugger;
        this.setState((prevState) => ({
            currentQuestionGroupId: prevState.currentQuestionGroupId + 1,
            currentIndex: 0,
        }));
        this.setQuestionDetails(answersDict[this.state.currentQuestionGroupId][0]);
    }
};

In this code in the else block, when the setState function is called, the state doesnot change

Note: Even if it is asynchronous it doesn't change it all after a long time

Could this problem be because of the ES6 destructuring of the state

EDIT

I logged and checked with a callback and still the state remains unchanged

handleSkipThisQuestionClicked = () => {
        const { answersDict, currentIndex, currentQuestionGroupId } = this.state;
        if (currentIndex < answersDict[currentQuestionGroupId].length - 1) {
            this.setQuestionDetails(answersDict[currentQuestionGroupId][currentIndex + 1]);
        } else {
            // set current index to 0 and increase the current group
            debugger;
            this.setState(
                (prevState) => ({
                    currentQuestionGroupId: prevState.currentQuestionGroupId + 1,
                    currentIndex: 0,
                }),
                () => {
                    console.log(this.state.currentQuestionGroupId);
                    console.log(this.state.currentIndex);
                },
            );
            this.setQuestionDetails(answersDict[this.state.currentQuestionGroupId][0]);
        }
    };

Without seeing more of your component we can only really guess what's going wrong here. But I'm suspicious of that final call: `this.setQuestionDetails(answersDict[this.state.currentQuestionGroupId][0])`, because the `this.state.currentQuestionGroupId` will still take the "old" value at that point. I don't know what `setQuestionDetails` does but you may well be unintentionally "resetting" to the old "question group" here. — Robin Zigmond, Aug 05 '21 at 18:53
@RobinZigmond There are no state changes in ```setQuestionDetails``` Let's say i want to make a call to ```setQuestionDetails``` with the updated values, even the callback logged the prevState values — Sanjay Kapilesh, Aug 05 '21 at 18:55
"how do i make sure the state is updated" - you mean, how do you make sure the state is updated before you do something next? The callback argument to setState is how you do that, which you've shown in your second snippet - if that's not working, there's a deeper problem, but it's hard to know what without seeing a reproducible example of your code. Could you perhaps make a simple codesandbox to demonstrate your issue? — Robin Zigmond, Aug 05 '21 at 18:57
You should add a breakpoint to see what that condition is doing because you may not even be changing state if that condition isn't met. — Andy, Aug 05 '21 at 19:09
Sorry man @RobinZigmond would love to but i am on a deadline now ,Giovanni Esposito answer worked out, but i am curious why didnt it work in callback Thanks for the help man — Sanjay Kapilesh, Aug 05 '21 at 19:25
@Andy i checked with the debugger, the code block is being executed — Sanjay Kapilesh, Aug 05 '21 at 19:27

Giovanni Esposito · Accepted Answer · 2021-08-05T19:13:52.960

You can always copy the state in local var, make changes and set again the state. Something like:

handleSkipThisQuestionClicked = () => {
    const { answersDict, currentIndex, currentQuestionGroupId } = this.state;
    if (currentIndex < answersDict[currentQuestionGroupId].length - 1) {
        this.setQuestionDetails(answersDict[currentQuestionGroupId][currentIndex + 1]);
    } else {
        // set current index to 0 and increase the current group
        debugger;
        let result = Object.assign({}, this.state);
        result.currentQuestionGroupId++;
        result.currentIndex = 0;

        this.setState({ result });
        this.setQuestionDetails(answersDict[result.currentQuestionGroupId][0]);
    }
};

@SanjayKapilesh happy to ear that. Have a nice coding =) – Giovanni Esposito Aug 05 '21 at 19:39 — Giovanni Esposito, Aug 05 '21 at 19:39

score 1 · Answer 2 · answered Aug 05 '21 at 19:09

As an aside, because setQuestionDetails relies on the state being up to date you should use setState's callback function.

this.setState(prevState => ({
  currentQuestionGroupId: prevState.currentQuestionGroupId + 1,
  currentIndex: 0,
}), () => this.setQuestionDetails(answersDict[this.state.currentQuestionGroupId][0]);

React setState not updating

2 Answers2