如何根據Reactjs中的產品數量計算產品的總價？

Question

我正在使用 React 和 firebase firestore 制作一個電子商務網站，以提高我的反應技能，但有幾天我一直被困在一個安靜的問題中。 我有一個名為 IndividualCartProducts 的組件，它是 CartProducts 上的 map 函數的結果。 IndividualCartProducts 有一些 JSX 渲染。 我有一個選擇標簽，用於在 IndividualCartProducts 中選擇產品的數量，該標簽正在改變該特定產品的價格，但這是硬編碼的......我已經做了類似的事情來實現這一點。

 <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。

我的 IndividualCartProducts 中有一個按鈕添加到購物車，它觸發一個函數，這個函數實際上是作為 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, ProductName, ProductDescription, ProductPrice, 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上找到

Answer 1

保留一個包含產品價格和數量的數組，然后循環計算總數