状态没有按应有的方式更新答案

【问题标题】：The state doesn't update as it should状态没有按应有的方式更新
【发布时间】：2020-02-06 11:40:06
【问题描述】：

用于更新状态的简单输入字段。

如果你输入5并点击'Pledge'，'before'日志显示0，但'after'日志也显示0。如果你再次点击按钮，它会显示5，并继续这样。就像它总是落后一样。

这是为什么呢？

App.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 = ''
  }

【问题讨论】：

标签： reactjs setstate

【解决方案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));
  }

【讨论】：

哦，所以这不是落后一步，只是我没有正确记录它......谢谢！

【解决方案2】：

因为setState 是一个异步调用。交易完成后有回调。

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

【讨论】：