Почему при постфиксном инкременте стейт не изменяется?

Question

[vs1710]

class Comp extends React.Component {
state = {
          counter: 0
        }
render() {
return (
<div>
<strong onClick={()=>{this.setState({counter: ++this.state.counter})}}>Кликни сюда</strong>
<p>Кол-во кликов {this.state.counter}</p>
</div>
)
}
}

Имеется вот такой код. Почему префиксная форма ++this.state.counter(this.state.counter+1) работает, а постфиксная вообще не меняет значение в this.state. Это как-то связанно с работой setState?

Answer 1

[Антон Спирин]

Вызов setState заменяет старый объект состояния новым. Изменения в обоих случаях вы делаете в старом.
Префиксный инкремент работает, так как в вызов setState передается значение увеличенное на единицу, постфиксный инкремент возвращает значение до увеличения.

В любом случае, мутировать объект состояния неправильно, это противоречит идеологии react и может вызвать ошибки в других местах.

Правильный вариант:

this.setState(prevState => ({ counter: prevState.counter + 1 }));

На последок добавлю, что ++this.state.counter не эквивалентно this.state.counter + 1. Префиксный инкремент эквивалентен записи:

this.state.counter += 1

или:

this.state.counter = this.state.counter + 1

Постфиксный, что-то вроде этого:

(this.state.counter = this.state.counter + 1, this.state.counter - 1)

Comments

[Алексей Уколов]

Не лучший выбор слов: "setState возвращает". Не знаю только как правильнее сформулировать :) Создаёт?

[Антон Спирин]

Алексей Уколов, да, что-то я не подумал с формулировкой) Поправил.

[vs1710]

К сожалению вопрос почему неправильно "мутировать объект" по типу{this.setState({counter: this.state.counter+1})} остался открытым.

[Алексей Уколов]

vs1710, прочитайте документацию и закроете его для себя.

Answer 2

[Алексей Уколов]

var counter = 0;

var post = counter++;
console.log(post, counter); // 0, 1

var pre = ++counter;
console.log(pre, counter); // 2, 2

Но такой код вообще неправилен, должно быть так:

this.setState((prevState) => ({counter: prevState.counter + 1}))

Answer 3

[0xD34F]

Вам бы разобраться, как оператор ++ работает. Сначала вы изменяете значение state.counter напрямую (чего делать НЕ НАДО), затем setState устанавливает в качестве нового значения counter'а его предыдущее значение, возвращаемое постфиксным ++.

Comments

[vs1710]

Я знаю как работает ++

[0xD34F]

vs1710, будь это правдой, вы бы этот вопрос не задали - сами бы разобрались, что, как и почему.