Почему this.state.count ++ не будет работать в this.setState ({}) - PullRequest
Новая
       35

Почему this.state.count ++ не будет работать в this.setState ({})

1 голос
/ 03 мая 2020

Я попробовал этот ответ 

import React from "react";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
    this.increment = this.increment.bind(this);
  }

  increment() {
    this.setState({
      count: this.state.count++,
    });
  }
  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>Change!</button>
      </div>
    );
  }
}

export default App;

И я понял, что когда я просто изменяю функцию приращения, все прекрасно работает 

increment(){
  this.setState({
      count:this.state.count+1
})}

Мне было интересно, почему приращение будет работать, когда this.state.count + 1 используется и не работает this.state.count ++ используется ..

Ответы [ 2 ]

1 голос
/ 03 мая 2020

Когда вы используете в постфиксе оператор увеличения / уменьшения, возвращаемое значение - это переменная до , которая была обновлена. Однако, если бы вы использовали его в префиксе, он сделал бы обновление, а затем вернул бы результат. Использование count + 1 аналогично, так как оно принимает значение count, добавляет единицу и затем возвращает результат.

Вы можете проверить это, просто перейдя в консоль браузера и выполнив следующий эксперимент: 

a=1;
console.log(a++); //returns 1
console.log(a); //returns 2

b=1;
console.log(++b); //returns 2
console.log(b); //returns 2

Вывод:

  • Использование this.state.count++ возвращает исходное значение setState()
  • Использование this.state.count + 1 возвращает исходное значение +1 setState()

Эта короткая статья объясняет это довольно хорошо.

Надеюсь, это поможет.

0 голосов
/ 03 мая 2020

Проблема

Проблема заключается в порядке, в котором применяются операции и как работает приращение. В вашем случае это (грубо говоря, на самом деле происходит больше, например, GetValue абстрактные операции) следующим образом:

  1. Внутренний [[Get]] метод вызывается для this.state.count
  2. Внутренний [[Set]] метод вызывается на this.state.count с результатом шага 1 + 1
  3. Внутренний [[Set]] метод вызывается на ({}).count со старым значением

Таким образом, после шага 3 у вас есть { count: 1 } в состоянии и ваш объект как { count: 0 }

setState

Под капотом setState, React делает следующее (опять примерно):

Вызывает enqueueSetState с объектом из шага 3 компонента updater, который помещает его в очередь обновления состояния. Когда состояние обновляется, Object.assign() вызывается для старого состояния в al oop обход новых частичных состояний, следовательно, переопределяя count на 0.

Решение

Как уже упоминалось в комментариях, переключитесь на приращение префикса, как на шаге 3 возвращаемым значением будет новое значение:

{ count : ++this.state.count }

Ссылка

  1. Увеличение ссылки на MDN
  2. Внутренние методы spe c
  3. Приращение постфикса spe c
  4. Приращение префикса spe c
  5. Object.assign() ссылка на MDN
...