Подсчёт суммы товаров (React)

Question

Написал подсчёт суммы товаров в корзине.

let arr = [];
      for ( let i = 0; i < document.getElementsByClassName("costmul").length; i++){
        arr.push(parseInt(document.getElementsByClassName("costmul")[i].textContent))
      }
      let sum = arr.reduce((a, b) => {
        return a + b;
      })
      document.getElementById("total").textContent = sum

Когда я нажимаю на кнопку изменения кол-ва товаров (синие кнопки), то находится сумма всех товаров и передаётся в общий span, и этот код работал бы, если бы я не делал на React, но из-за Реакта у меня появляется проблема с рендером, то есть когда я нажимаю на кнопку увеличения кол-ва товара, страница находит сумму И ТОЛЬКО ПОТОМ Реакт перерендерит сумму одного товара, добавив стоимость ещё одного, таким образом React не успевает рендерить из-за чего сумма не верная (на один товар позади). Кто-нибудь может подсказать решение, как вообще другие люди решают эту задачу?

Answer 1

Я конечно сам новичок в React. Но думаю в вашем случае, должно быть что-то на подобие этого Ссылка на редактор

const items = [
  {
    title: 'Товар 1',
    price: 1000,
    count: 1
  },
  {
    title: 'Товар 2',
    price: 5750,
    count: 1
  },
  {
    title: 'Товар 3',
    price: 3333,
    count: 1
  }
];

const Product = ({ item, events }) => {
  return (
    <div style={{ border: '1px solid', marginBottom: '1em', padding: '0 1em' }}>
      <h3>{item.title}</h3>
      <p>{item.price}</p>
      <button onClick={() => events.increment(item)}>+</button>
      {item.count}
      <button onClick={() => events.decrement(item)}>-</button>
    </div>
  );
};

const Basket = ({ products }) => {
  const [total, setTotal] = useState(0);
  const [items, setItems] = useState(products);

  const events = {
    increment: item => {
      let index = items.indexOf(item);
      item.count = item.count + 1;
      products[index] = item;

      setItems([...products]);
    },
    decrement: item => {
      let index = items.indexOf(item);
      item.count = item.count - 1;
      products[index] = item;

      setItems([...products]);
    }
  };

  useEffect(() => {
    let summ = items.reduce(
      (total, { count, price }) => count * price + total,
      0
    );

    setTotal(summ);
  }, [items]);

  return (
    <div>
      <p>Сумма: {total}</p>
      {items.map((item, index) => (
        <Product key={index} events={events} item={item} />
      ))}
    </div>
  );
};

БЛОГ НА HUSL

Подсчёт суммы товаров (React)

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