Блог

Я создаю сайт электронной коммерции, используя React и firebase firestore для оттачивания своих навыков реагирования, но в течение нескольких дней я застрял в тихой проблеме. У меня есть компонент с именем IndividualCartProducts, который является результатом функции map в CartProducts. У 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.

в my 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. Если вам нужна дополнительная информация, пожалуйста, дайте мне знать, это мой первый вопрос здесь, и я тоже новичок в react. Любой намек, идея, логика, любой код будут высоко оценены

полный код можно найти здесь, на githubhttps://github.com/HamzaAnwar1998/EcommerceWithReact

Сохраните массив с ценой и количеством продукта и просто выполните цикл, чтобы рассчитать общее количество