Как посчитать общую сумму каждого товара

Question

import React from "react";
import "./styles.css";

const items = [
  {
    id: 1,
    name: "Constructor LEGO",
    price: 300
  },
  {
    id: 2,
    name: "Train Station",
    price: 200
  },
  {
    id: 3,
    name: "Hot Wheels Track",
    price: 150
  }
];

const Shop = () => {
  const [cart, setCart] = React.useState([]);
  const cartTotalAll = cart.reduce((totalAll, { price = 0 }) => totalAll + price, 0);

  const addToCart = (item) => setCart((currentCart) => [...currentCart, item]);

  const removeFromCart = (item) => {
    setCart((currentCart) => {
      const indexOfItemToRemove = currentCart.findIndex(
        (cartItem) => cartItem.id === item.id
      );

      if (indexOfItemToRemove === -1) {
        return currentCart;
      }

      return [
        ...currentCart.slice(0, indexOfItemToRemove),
        ...currentCart.slice(indexOfItemToRemove + 1)
      ];
    });
  };

  const cartTotal = cart.reduce((total, { price = 0 }) => total + price, 0);

  const amountOfItems = (id) => cart.filter((item) => item.id === id).length;
  const listItemsToAdd = () =>
    items.map((item) => (
      <div key={item.id}>
        <table>
          <td>{item.name}</td>
          <td>{item.price}</td>
          <td><button type="submit" onClick={() => addToCart(item)}> + </button>&nbsp;&nbsp;&nbsp;
            <button type="submit" onClick={() => removeFromCart(item)}> - </button></td>
          <td>Quantity {amountOfItems(item.id)}</td>
          <td>Total: ${cartTotal}</td>
        </table>
      </div>
    ));

  return (
    <div>
      Cart
      <div>{listItemsToAdd()}</div>
      <div>Total: ${cartTotalAll}</div>
    </div>
  );
};

export default Shop;

Answer 1

Как правило, если у вас есть массив и вы хотите получить одно значение на основе всех значений, вам нужно Array.proptotype.reduce()

const products = [
    {
          id:1,
          product_title:"Item 1",
          quantity:2,
          price:100.00
    },
    {
          id:2,
          product_title:"Item 2",
          quantity:3,
          price:300.00
    },
];
const countTotal = (items) => items.reduce((acc, curr) => acc + curr.quantity * curr.price, 0);

console.log(countTotal(products))

Answer 2

Один из вариантов реализации корзины покупок с подсчетом сумм и количества товаров, а так же, что бы не нарушать вашу задумку и стилистику.

В исходный объект был добавлен флаг наличия товара в корзине.
При увеличении, если товар в корзине есть, его не надо повторно туда добавлять, надо просто увеличить счетчик этого товара.

Дополнительные комментарии по тексту

const items = [
  {
    id: 1,
    name: "Constructor LEGO",
    price: 300,
    inCart: false
  },
  {
    id: 2,
    name: "Train Station",
    price: 200,
    inCart: false
  },
  {
    id: 3,
    name: "Hot Wheels Track",
    price: 150,
    inCart: false
  }
];

export default function App() {
  const [cart, setCart] = React.useState([]);
  // В итоговую сумму должно идти количество умноженное на цену
  const cartTotalAll = cart.reduce((totalAll, item) => totalAll + item.price * item.count, 0);

  const addToCart = (item) => setCart((currentCart) => {
    item.count = 1; // Увеличиваем количество товара в корзине
    item.inCart = true; // Взводим флаг наличия товара в корзине
    return [...currentCart, item]
  });
  // Увеличивает количество товара в корзине
  const incCount = (id) => setCart((currentCart) => {
    return currentCart.map((cur) => {
      if (cur.id === id) {
        cur.count++;
      }
      return cur;
    });
  })

  const removeFromCart = (id) => {
    setCart((currentCart) => {
      const indexOfItemToRemove = currentCart.findIndex(
        (cartItem) => cartItem.id === id
      );

      if (indexOfItemToRemove === -1) {
        return currentCart;
      }
      // Получаем найденный элемент
      const elem = currentCart[indexOfItemToRemove];
      if (elem.count > 1) { // Если товаров больше одного
        elem.count--; // Уменьшаем счетчик
        // Меняем элемент
        currentCart.splice(indexOfItemToRemove, 1, elem);
      } else { // Если товар единственный
        items.forEach((it) => {
          // Метим, что товара более нет в корзине
          if (it.id === id) it.inCart = false;
        })
        // Удаляем элемент
        currentCart.splice(indexOfItemToRemove, 1)
      }
      // Сохраняем состояние
      return [ ...currentCart ];
    });
  };
  // Получаем сумму по товару
  const cartTotal = (id) => {
    const val = cart.find((item) => item.id === id);
    if (val) {
      return val.count * (val.price || 0);
    }
    return 0;
  }

  const amountOfItems = (id) => cart.find((item) => item.id === id)?.count || 0;

  const listItemsToAdd = () =>
    items.map((item) => (
      <div key={item.id}>
        <table>

          <td>{item.name}</td>
          <td>{item.price}</td>
          <td><button type="submit" onClick={() => item.inCart ? incCount(item.id) : addToCart(item)}> + </button>&nbsp;&nbsp;&nbsp;
            <button type="submit" onClick={() => item.inCart ? removeFromCart(item.id) : ''}> - </button></td>
          <td>Quantity {amountOfItems(item.id)}</td>
          <td>Total: ${cartTotal(item.id)}</td>
        </table>
      </div>
    ));
  return (

    <div>
      Cart
      <div>{listItemsToAdd()}</div>
      <div>Total: ${cartTotalAll}</div>
    </div>
  );
};

БЛОГ НА HUSL

Как посчитать общую сумму каждого товара

Ответы (2 шт):