Home / Questions / 239614
Accepted
Nacho Zve De La Torre
Asked: 2020-02-21 13:13:53 +0800 CST 2020-02-21 13:13:53 +0800 CST

Why doesn't '++' work when incrementing a number inside React's setState() method?

  • 772

I am following a tutorial where I have the following class method:

incrementarScore() {
    this.setState({
        score: this.state.score += 1
    });
}

The code above works perfect.

If I change the line inside the setState() method to this:

score: this.state.score += 1

Also works

but if I change it to this:

score: this.state.score ++

It no longer works, which seems more than strange to me.

Could someone explain to me why?

reactjs

2 Answers

  1. Best Answer

    You are confusing yourself with what the operator does ++:

    • ++ variable

    First increment the current value. Then, it returns that value (already incremented).

    • variable ++

    First get the current value ; then increment it.

    This last point is your case. Arguably, the shape variable ++ copies the current value. The original value is indeed incremented... but it returns to you the value before the increment.

    In your case, your code actually runs like this:

    score: this.state.score
this.state.score += 1

    You can solve it using the other way:

    score: ++ this.state.score
    • 5

  2. It's because the increment operator can be used as a prefix or postfix. Depending on how you use it, it will return the new value sooner or later.

    a = 1
a++ // 1
a // 2
++a // 3
a // 3
    • 4