时间戳

首页 > 解决方案 > 为什么变量的状态在父类中没有正确更新

reactjs - 为什么变量的状态在父类中没有正确更新

问题描述

...
super(props)
this.state = {
  cartAddedCount: 0,
  itemNum: null,
  itemAdded: []
}
...
cartAdd(e) {
  let allItem = this.state.itemNum
  let itemN = e.target.name !== null ? e.target.name.toString().split('_')[1] : null
  let newItems = allItem !== null ? allItem + "," + itemN : itemN
  this.setState((prevState) => {
    return {
      cartAddedCount: prevState.cartAddedCount + 1,
      itemNum: newItems
    }
  })
  console.log(this.state.itemNum)
}

generateProductList(pd) { //pd is an an array of objects
  var prodList = []
  var prodDLen = 5
  for (var t = 0; t < prodDLen; t++) {
    prodList.push(
      <button name={"item_" + pd.productData[t].id} onClick={(e) => this.cartAdd(e)}>Buy Now</button>
    )
  }
  return prodList
}
...
<SCart count={this.state.cartAddedCount} iNum={this.state.itemNum} openM={this.manageCartModal} />

为什么我第一次点击“立即购买”时，在我的父类状态下，cartAddedCount 为 0，itemNum 为空，第二次点击，cartAddedCount 为 1，itemNum 为 1

然而，SCart 在count第一次点击时获得 1，在第二次点击时获得 2，依此类推。

我该如何解决这个问题？

标签： reactjsreact-state-managementreact-state

解决方案

这就是问题所在

this.setState((prevState) => {
    return {
      cartAddedCount: prevState.cartAddedCount + 1,
      itemNum: newItems
    }
  })
  console.log(this.state.itemNum)

reactsetState方法不是同步的。要查看setState调用后立即设置的状态，请使用如下回调函数

this.setState((prevState) => {
    return {
      cartAddedCount: prevState.cartAddedCount + 1,
      itemNum: newItems
    }
  }, () => console.log(this.state.itemNum))

推荐阅读