我已经使用 React 构建了一个购物车。为什么我的购物车不工作?通过工作我的意思是为什么购物车中的数量没有增加?
I have built a shopping cart using React. Why isn't my cart working? By working I mean why isn't the count in the cart increasing?
我使用 React 构建了一个购物车。购物车在 1 之后不显示购物车中的物品总数。也就是说 1 是它可以计数的最大数量。我希望它能计数超过 1 个项目。这是 Cart
组件:
Cart.js
import React, { Component } from 'react'
import formatCurrency from '../util';
export default class Cart extends Component {
render() {
const { cartItems } = this.props;
//this part is not displaying the number of items in the cart
return (
<div>
{cartItems.length === 0 ? (
<div className="cart cart-header">Cart is empty</div>
) : (
<div className="cart cart-header">
You have {cartItems.length} in the cart{" "}
</div>
)}
<div>
<div className="cart">
<ul className="cart-items">
{cartItems.map(item => (
<li key={item._id}>
<div>
<img src={item.image} alt={cartItems.title}></img>
</div>
<div>
<div>{item.title}</div>
<div className="right">
{formatCurrency(item.price)} * {item.count}
<button onClick={ () => this.props.removeFromCart(item)}> Remove</button>
</div>
</div>
</li>
) )}
</ul>
</div>
</div>
</div>
);
}
}
App.js
状态我也加进去了
class App extends React.Component {
constructor(){
super();
this.state = {
products: data.products,
cartItems: [],
size:"",
sort:"",
};
}
//this part is not working
addToCart = (product) => {
const cartItems = this.state.cartItems.slice();
let alreadyInCart = false;
cartItems.forEach((item) => {
if (item._id === product._id) {
item.count++;
alreadyInCart = true;
}
});
if (!alreadyInCart) {
cartItems.push({...product, count: 1 });
}
this.setState({cartItems});
};
这里是 link 在 Github 上编码:Link To Github
addToCart = (product) => {
const { cartItems } = this.state;
// find whether the product is there in the cartItems
const isProductPresent = cartItems.some(item => item.id === product.id);
if(isProductPresent){
const updatedCartItems = cartItems.map(item => {
if(item.id === product.id){
return { ...item, count: ++item.count}
}
return item;
})
this.setState({cartItems: updatedCartItems});
}
else {
this.setState({cartItems: [...cartItems, {...product, count: 1}] });
}
};
我使用 React 构建了一个购物车。购物车在 1 之后不显示购物车中的物品总数。也就是说 1 是它可以计数的最大数量。我希望它能计数超过 1 个项目。这是 Cart
组件:
Cart.js
import React, { Component } from 'react'
import formatCurrency from '../util';
export default class Cart extends Component {
render() {
const { cartItems } = this.props;
//this part is not displaying the number of items in the cart
return (
<div>
{cartItems.length === 0 ? (
<div className="cart cart-header">Cart is empty</div>
) : (
<div className="cart cart-header">
You have {cartItems.length} in the cart{" "}
</div>
)}
<div>
<div className="cart">
<ul className="cart-items">
{cartItems.map(item => (
<li key={item._id}>
<div>
<img src={item.image} alt={cartItems.title}></img>
</div>
<div>
<div>{item.title}</div>
<div className="right">
{formatCurrency(item.price)} * {item.count}
<button onClick={ () => this.props.removeFromCart(item)}> Remove</button>
</div>
</div>
</li>
) )}
</ul>
</div>
</div>
</div>
);
}
}
App.js
状态我也加进去了
class App extends React.Component {
constructor(){
super();
this.state = {
products: data.products,
cartItems: [],
size:"",
sort:"",
};
}
//this part is not working
addToCart = (product) => {
const cartItems = this.state.cartItems.slice();
let alreadyInCart = false;
cartItems.forEach((item) => {
if (item._id === product._id) {
item.count++;
alreadyInCart = true;
}
});
if (!alreadyInCart) {
cartItems.push({...product, count: 1 });
}
this.setState({cartItems});
};
这里是 link 在 Github 上编码:Link To Github
addToCart = (product) => {
const { cartItems } = this.state;
// find whether the product is there in the cartItems
const isProductPresent = cartItems.some(item => item.id === product.id);
if(isProductPresent){
const updatedCartItems = cartItems.map(item => {
if(item.id === product.id){
return { ...item, count: ++item.count}
}
return item;
})
this.setState({cartItems: updatedCartItems});
}
else {
this.setState({cartItems: [...cartItems, {...product, count: 1}] });
}
};