状态未按应有的方式更新

Question

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

如果你输入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 = ''
  }

Answer 1

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

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

Answer 2

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));
  }

状态未按应有的方式更新

The state doesn't update as it should

setstate

reactjs