为什么在我转移到手机查看文档更新后？

Question

我想显示购物车中有多少商品。用户将商品添加到购物车后，我想显示他在购物车中有多少商品。有代码可以检查购物车中是否有多个商品，然后显示它：

{this.state.inCart.length > 0 ? ( <div className="in-cart-e">{this.state.inCart.length}</div> ) : <div style={{'padding': '14px'}}></div>}

但只有在我将另一个项目添加到购物车或转移到移动视图后，文档才会更新，有代码将项目添加到购物车数组：

async firstCart(){
  await this.setState({ firstCart: !this.state.firstCart });
   if (this.state.firstCart) {
      this.state.inCart.push('firstCart');
  }else{
    if (this.state.inCart.length > 0) {
      var index = this.state.inCart.indexOf('firstCart');
      this.state.inCart.splice(index, 1);
    }
  }
}

另外，我已经在使用代码来检查购物车中是否有要显示的商品，但是这个 div 对 web 视图是隐藏的，它只显示在手机视图中。

知道为什么会这样吗？

Answer 1

除非 React 最近发生了变化……你不能在 setState 上使用 await，因为它是一个不返回承诺的异步函数。这将不允许您等待状态本身的更新。

setState 确实会在您需要在更新后立即执行某些操作时提供回调：

this.setState({ firstCart: !this.state.firstCart }, function () {
  //... do stuff here after update
})

更多信息在这里：https://reactjs.org/docs/react-component.html#setstate

---

您还有一些问题需要解决。

您似乎正在尝试手动更新状态：this.state.inCart.push('firstCart') && this.state.inCart.splice(index, 1) 其中 splice 是一个数组修改器。

这在反应中是不可行的。每次状态更新都必须经过setState，这样组件才能进行相应的更新。