Reactjs 增加购物车内的商品时重复商品

我正在开发一个购物车，用户可以将物品添加到购物车中，并通过付款结账

例如，当我尝试从主页或类别页面添加项目时出现的问题，我在购物车中点击了四次蓝牙耳机，它应该显示产品数量为4，但它会重复显示为四个不同的项目，如中所示。当我向购物车中添加一个产品并尝试缓慢增加数量时，它会正确显示产品数量，但当我尝试快速增加数量时单击它将创建数量相同的产品副本，并增加账单金额，如我尝试增加购物车中的项目时创建了4个重复项目所示

我尝试了下面的代码

    /* Increase product qty */
  IncreaseItem(value, prodid, cartid) {
    const value_stock = value + 1
    this.onchange(value_stock, prodid, cartid)
  }

  /* Increment button call to check with stock */
  IncrementItem(e, prodid, cartid) {
    const value = this.quantity_value
    this.mapprodstock(value, prodid, cartid)
  }

下面是创建和添加的组件

<Wrapper>
    <Btn onClick={e => this.DecreaseItem(e.target.value, this.props.productidval, this.props.cartidval)}> - </Btn>
    <InputField
      value={this.quantity_value}
      onChange={e => this.onchange(e.target.value, this.props.productidval, this.props.cartidval)}
    />
    <Btn onClick={e => this.IncrementItem(e.target.value, this.props.productidval, this.props.cartidval)}> + </Btn>
    <Message>{this.state.message}</Message>
  </Wrapper>

以及

onchange

功能

    /* Get the product item and store in state to get article number */
  mapprodstock = async (value, prodid, cartid) => {
    const productid = prodid
    const apiUrl = `${endpointCustomProduct()}${productid}`
    const params = {
      access_token: handleGetToken(),
      fields: '*.*',
    }
    const response = await CustomproductService({ url: apiUrl, params })
    this.setState({
      product_data: response,
    })
    const articlenumber = _.map(this.state.product_data, (item) => {
      return item.article_number
    })
    this.checkstock(value, prodid, cartid, articlenumber)
  }

    /* change in input value to store qty */
  async onchange(value_stock, prodid, cartid) {
    this.quantity_value = value_stock
    this.cartService(cartid, prodid, value_stock)
  }

甚至我在更新产品时也试图禁用递增按钮和递减按钮，但它仍然会复制行

---

我可以知道错误在哪里吗

setState

是异步的，因此如果需要在更新后获取最新状态，请使用回调：

  const response = await CustomproductService({ url: apiUrl, params});

  this.setState({
    product_data: response,
  }, () => { // Use callback here
    const articlenumber = _.map(this.state.product_data, (item) => {
      return item.article_number
    })
    this.checkstock(value, prodid, cartid, articlenumber)
  }))

---

您需要显示

mapprodstock

和

onchange

方法的代码。@是否可以检查更新后的问题？否，回调函数仍面临相同的问题。是否有其他方法不复制购物车