[英]How to add the same products to the cart with counter?
I want that when adding products to the basket it is not duplicated.我希望在将产品添加到购物篮时不会重复。 but that would be written that the basket already has 2 or more of these goods.但那会写成篮子里已经有 2 个或更多这样的商品。 How do I implement this in code?如何在代码中实现这一点? I understand that I need a counter for added products but don't know how to do it.我知道我需要一个添加产品的柜台,但不知道该怎么做。 Please give me a tip I will be glad of any help.请给我一个提示,我会很高兴得到任何帮助。
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",
q:0
},
{
id: 2,
name: "Product 2",
price: "70",
q:0
},
{
id: 3,
name: "Product 3",
price: "80",
q:0
},
{
id: 4,
name: "Product 4",
price: "90",
q:0
},
{
id: 5,
name: "Product 5",
price: "100",
q:0
}
],
count: []
};
}
incrementCount = (item) => {
const {id, name, price, q} = item;
let array = [...this.state.count];
let indexOfStevie = array.findIndex(i => i.id === id);
array[indexOfStevie] = {...item, q: q+1}
console.log(array[indexOfStevie])
if (!array.some(i => i.id === id)) {
this.setState({
count: [...this.state.count, { id, name, price, q: q+1}]
});
}
};
delete = id => {
let array = [...this.state.count].filter(item => item.id !== id);
this.setState({
count: [...array]
});
};
render() {
return (
<div className="wrap">
<div>
<h3>products</h3>
<ul>
{this.state.data.map(item => (
<li key={item.id}>
{item.name}
{item.price}
<button
onClick={() =>
this.incrementCount(item)
}
>
add
</button>
</li>
))}
</ul>
</div>
<div>
<h3>bascket</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
? "empty"
: "total" +
this.state.count.reduce(
(accumulator, currentValue) =>
accumulator + +currentValue.price,
0
)}
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Shop />, document.getElementById("todos-example"));
constrsuctor(props){
this.state = { my_cart : {} }
}
add_to_cart = (item) => {
let cart_instance = this.state.my_cart[item.id];
this.setState({
my_cart : { ...this.state.my_cart, [item.id] : (cart_instance) ? this.state[item.id] + 1 : 0 }
});
}
This will leave you with a representation of your cart as { 1: n, 2: n, .... } where n is how many这将使您的购物车表示为 { 1: n, 2: n, .... } 其中 n 是多少
You're only adding the product object once if its id isn't found in count.如果在计数中找不到产品 object ,您只需添加一次产品 id。 This is why q isn't changing;这就是为什么 q 没有改变; it's always 1 because that's what q is when it's added.它始终为 1,因为这就是 q 添加时的含义。 You need to increment it if it is found in count.如果在计数中找到它,则需要增加它。 Leaving as much as your other code intact as possible:尽可能多地保留其他代码:
incrementCount = (item) => {
const {id, name, price, q} = item;
let array = [...this.state.count];
let indexOfStevie = array.findIndex(i => i.id === id);
// if the product is currently in the count, modify it
if(indexOfStevie > -1) {
array[indexOfStevie].q++
this.setState( {
count: array
} );
} else {
// the product is not currently in count, add it
this.setState({
count: [...this.state.count, { id, name, price, q: q+1}]
});
}
};
Then to generate the total, you need to add the product of quantity * price, rather than just adding the price.然后要生成总数,您需要添加数量*价格的乘积,而不是仅添加价格。 In render():在渲染()中:
{this.state.count.length == 0
? "empty"
: "total" +
this.state.count.reduce(
(accumulator, currentValue) =>
// add the product of quantity and price to total
accumulator + (currentValue.q * currentValue.price),
0
)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.