Реакция prevState и увеличение свойства объекта +1 не работают правильно

Question

У меня есть объект в исходном состоянии, и когда я нажимаю кнопку, я хочу увеличить свойство этого объекта + 1.

(это собственный проект реагирования)

Мой подход :

constructor(props) {
  super(props);
  this.state = {
    myObject: {
      incrementCount: 0, // When i press button it should be increment + 1
      decrementCount: 0,
    }
  }
}

...

onPressButton = () => {
  this.setState(
    prevState => ({
        myObject: {
        ...prevState.myObject,
        incrementCount: this.state.myObject.incrementCount + 1,
      },
    }),
    console.log('TOTAL incrementCount: ', this.state.myObject.incrementCount),
  );
};

Но когда я нажимаю кнопку, я получаю следующее поведение:

console.log prints 0 for first click, 
1 for second click. 

Обновление объекта происходит после журнала консоли. Но я использую это в обратном вызове setState.

Answer 1

Пожалуйста, передайте функцию в качестве обратного вызова вместо журнала консоли. Из документов обратный вызов должен быть функцией, но вы выполняете console.log() вместо передачи обратного вызова.

setState (updater [, callback])

onPressButton = () => {
  this.setState(
    prevState => ({
      myObject: {
        ...prevState.myObject,
        incrementCount: prevState.myObject.incrementCount + 1
      }
    }),
    () =>
      console.log(
        "TOTAL incrementCount: ",
        this.state.myObject.incrementCount
      )
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "React",
      myObject: {
        incrementCount: 0, // When i press button it should be increment + 1
        decrementCount: 0
      }
    };
  }

  onPressButton = () => {
    this.setState(
      prevState => ({
        myObject: {
          ...prevState.myObject,
          incrementCount: prevState.myObject.incrementCount + 1
        }
      }),
      () =>
        console.log(
          "TOTAL incrementCount: ",
          this.state.myObject.incrementCount
        )
    );
  };

  render() {
    return (
      <div>
        <p>{this.state.myObject.incrementCount}</p>
        <button onClick={this.onPressButton}>Increment</button>
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>