CartContext.jsx
2.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import React, { createContext, useState, useContext, useEffect } from 'react';
const CartContext = createContext();
export const useCart = () => {
const context = useContext(CartContext);
if (!context) {
throw new Error('useCart must be used within a CartProvider');
}
return context;
};
export const CartProvider = ({ children }) => {
const [cartItems, setCartItems] = useState([]);
useEffect(() => {
// 从本地存储加载购物车
const savedCart = localStorage.getItem('cart');
if (savedCart) {
setCartItems(JSON.parse(savedCart));
}
}, []);
useEffect(() => {
// 保存购物车到本地存储
localStorage.setItem('cart', JSON.stringify(cartItems));
}, [cartItems]);
const addToCart = (product, quantity = 1) => {
setCartItems(prevItems => {
const existingItem = prevItems.find(item => item.id === product.id);
if (existingItem) {
return prevItems.map(item =>
item.id === product.id
? { ...item, quantity: item.quantity + quantity }
: item
);
} else {
return [...prevItems, { ...product, quantity }];
}
});
};
const removeFromCart = (productId) => {
setCartItems(prevItems => prevItems.filter(item => item.id !== productId));
};
const updateQuantity = (productId, quantity) => {
if (quantity <= 0) {
removeFromCart(productId);
return;
}
setCartItems(prevItems =>
prevItems.map(item =>
item.id === productId ? { ...item, quantity } : item
)
);
};
const clearCart = () => {
setCartItems([]);
};
const getCartTotal = () => {
return cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
};
const getCartItemsCount = () => {
return cartItems.reduce((count, item) => count + item.quantity, 0);
};
const value = {
cartItems,
addToCart,
removeFromCart,
updateQuantity,
clearCart,
getCartTotal,
getCartItemsCount,
};
return (
<CartContext.Provider value={value}>
{children}
</CartContext.Provider>
);
};
export default CartContext;