Государство не обновляется как следует

Question

Простое поле ввода для обновления состояния.

Если вы введете 5 и нажмете «Залог», журнал «до» покажет 0, а журнал «после» также покажет 0. Если вы нажмете кнопку затем снова показывает 5, и так продолжается. Как будто он всегда на шаг позади.

Почему это так?

Приложение. js

state = {
    fundGoal: 1000,
    amountFunded: 0
  }

  getAmount = amount => {
    console.log('before', this.state.amountFunded)
    const parsedAmount = parseInt(amount)
    this.setState(prevState => ({
      amountFunded: prevState.amountFunded + parsedAmount
    }))
    console.log('after', this.state.amountFunded)
  }

Форма в другом компоненте

getAmount = e => {
    e.preventDefault()
    const value = e.target.elements.amount.value
    this.props.getAmount(value)

    e.target.elements.amount.value = ''
  }

Answer 1

Функция setState () выполняется асинхронно, поэтому, если вы хотите увидеть обновленное состояние после завершения работы setState (), вы можете передать функцию обратного вызова setState следующим образом

getAmount = amount => {
    console.log('before', this.state.amountFunded)
    const parsedAmount = parseInt(amount)
    this.setState(prevState => ({
      amountFunded: prevState.amountFunded + parsedAmount
    }), () => console.log('after', this.state.amountFunded));
  }

Answer 2

Потому что setState - это асинхронный вызов. После завершения транзакции выполняется обратный вызов.

this.setState(prevState => ({
      amountFunded: prevState.amountFunded + parsedAmount
    }), () => console.log('after', this.state.amountFunded))