如何基于Reactjs中的产品数量计算产品总价？

如何解决如何基于Reactjs中的产品数量计算产品总价？

我正在使用React和firebase firestore创建一个电子商务站点，以提高我的React技能，但是有几天我一直陷入一个安静的问题。我有一个名为IndividualCartProducts的组件，它是CartProducts上的map函数的结果。 IndividualCartProducts呈现了一些JSX。我在个人购物产品中有一个用于选择产品数量的选择标签，该标签正在更改该特定产品的价格，但这是硬编码的……我已经做了类似的事情来实现这一目标。

 <label htmlFor="CurrencySign">Rs</label>
 <input type="text" className='form-control'
  value={IndividualCart.ProductPrice * quantity} // this is what I mean with hardcoded
  required readOnly disabled/>

我只想根据产品的数量来计算总价，但我不知道该怎么做。我认为将通过操纵阵列，根据该阵列中的数量更新特定产品的价格来完成，但到目前为止我还没有做到。

再听一遍，我有3个与我的问题有关的组件1）appjs 2）CartsProducts 3）IndividualCartProducts。

在我的PersonalCartProducts中有一个添加到购物车的按钮会触发一个函数，而该函数实际上是来自appjs的道具。在appjs中，在该函数中，我收到了所有产品信息，并将其推送到Firestore中

 // add to cart
  addToCart = (ProductID,ProductName,ProductDescription,ProductPrice,ProductImg) => {
    auth.onAuthStateChanged(user => {
      if (user) {
        db.collection('cart ' + user.uid).doc(ProductID).set({
          ProductID,ProductImg
        }).then(() => console.log('successfully added to cart')).catch(err => console.log(err.message))
      }
      else {
        console.log('sign in first');
      }
    })
  }

然后在componentDidMount（）中，我检索了该产品数据并更新了购物车的状态

// getting cart data and setting state
    const cartProducts = this.state.Cart;
    auth.onAuthStateChanged(user => {
      if (user) {
        db.collection('cart ' + user.uid).onSnapshot(snapshot => {
          let changes = snapshot.docChanges();
          changes.forEach(change => {
            if (change.type === 'added') {
              cartProducts.push({
                CartProductID: change.doc.id,ProductName: change.doc.data().ProductName,ProductDescription: change.doc.data().ProductDescription,ProductPrice: change.doc.data().ProductPrice,ProductImg: change.doc.data().ProductImg
              })
            }
            else if (change.type === 'removed') {
              for (var i = 0; i < cartProducts.length; i++) {
                if (cartProducts[i].CartProductID === change.doc.id) {
                  cartProducts.splice(i,1);
                }
              }
            }
            this.setState({
              Cart: cartProducts,noOfProductsInCart: this.state.Cart.length,})
            // console.log(this.state.Price);
          })
        })
      }
      else {
        console.log('user is not signed in to retrive cart data');
      }
    })

现在我将此状态传递给CartProducts应用的地图函数，并返回一个名为IndividualCartProducts的组件，并返回JSX。如果您需要更多信息，请告诉我，这是我在这里的第一个问题，我也正在响应初学者。任何提示，想法，逻辑，任何代码将不胜感激

完整代码可以在github https://github.com/HamzaAnwar1998/EcommerceWithReact

上找到。

解决方法

保留带有产品价格和数量的数组，然后循环进行计算