Как реализовать добавление товара в корзину?

Question

[timonck]

Есть лист товаров и корзина. Если мы добавили товар в корзину и хотим его еще раз добавить, то нужно, чтобы он не добавлялся заново, а чтобы писало что в корзине уже 2 или 3 таких товара, и соответственно цена была указана за сумму этих товаров. Какими способами можно реализовать это?

import React from "react";
import ReactDOM from "react-dom";

class Shop extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          id: 1,
          name: "Product 1",
          price: "50"
        },
        {
          id: 2,
          name: "Product 2",
          price: "70"
        },
        {
          id: 3,
          name: "Product 3",
          price: "80"
        },
        {
          id: 4,
          name: "Product 4",
          price: "90"
        },
        {
          id: 5,
          name: "Product 5",
          price: "100"
        }
      ],
      count: []
    };
  }
  incrementCount = (id, name, price) => {
    let array = [...this.state.count];
    if (!array.some(i => i.id === id)) {
      this.setState({
        count: [...this.state.count, { id, name, price }]
      });
    }
  };

  delete = id => {
    let array = [...this.state.count].filter(item => item.id !== id);
    this.setState({
      count: [...array]
    });
  };

  render() {
    return (
      <div className="wrap">
        <div>
          <h3>Товары</h3>
          <ul>
            {this.state.data.map(item => (
              <li key={item.id}>
                {item.name}
                {item.price}
                <button
                  onClick={() =>
                    this.incrementCount(item.id, item.name, item.price)
                  }
                >
                  add
                </button>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <h3>Корзина</h3>
          <ul>
            {this.state.count.map(item => (
              <li>
                {item.id}
                {item.name}
                <button onClick={() => this.delete(item.id)}>X</button>
              </li>
            ))}
          </ul>
          <div>
            {this.state.count.length == 0
              ? "В корзине пусто"
              : "Сумма " +
                this.state.count.reduce(
                  (accumulator, currentValue) =>
                    accumulator + +currentValue.price,
                  0
                )}
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Shop />, document.getElementById("todos-example"));

Answer 1

[0xD34F]

Храните количество. При обновлении, если товар уже был добавлен - увеличиваете количество, если нет - добавляете с количеством, равным единице:

incrementCount = (id, name, price) => {
  this.setState(({ count }) => {
    const el = count.find(n => n.id === id);
    return {
      count: el
        ? count.map(n => n === el ? { ...n, count: n.count + 1 } : n)
        : [ ...count, { id, name, price, count: 1 } ]
    };
  });
}

Соответственно, при расчёте суммы надо будет добавить умножение цены на количество:

this.state.count.reduce((acc, n) => acc + n.price * n.count, 0)

Comments

[timonck]

Спасибо буду разбираться