📦 Cart Management — React 购物车状态管理
v1.0.0提供 React 购物车状态管理解决方案，包括防止重复添加、localStorage 持久化、CartContext 模式。适用于构建或修复购物车、产品列表等场景。
0· 468·2 当前·3 累计
by 安全扫描
OpenClaw
安全
medium confidence该技能与其声明的目的（React 购物车状态模式）一致，但运行时指令中包含实现错误和不完整的指导（localStorage/SSR/XSS 隐患和过时状态竞争条件），开发者应注意。
安全有层次，运行前请审查代码。
运行时依赖
无特殊依赖
版本
latestv1.0.02026/2/22
初始发布：提供强大的 React 购物车状态管理模式。- 通过 CartContext 中的产品 ID 跟踪防止重复添加。- 将购物车状态和产品 ID 持久化到 localStorage 以实现会话持久化。- 在 CartContext 中集中添加/删除逻辑以提高可维护性。- 包括明确的反模式和数量管理推荐。- 设计用于购物车、产品列表或相关 UI 的复用。
● 无害
安装命令
点击复制官方npx clawhub@latest install cart-management
🇨🇳 镜像加速npx clawhub@latest install cart-management --registry https://cn.longxiaskill.com
技能文档
为 React 购物车状态提供模式：防止重复添加、持久化、上下文设计。
防止重复添加
- 在 CartContext 中跟踪产品 ID（单独状态或从 cartItems 派生）
- 添加前检查
productIdsInCart.includes(item.id) - 在上下文中集中逻辑，不在 ProductCard 或子组件中
localStorage 持久化
- 挂载时从
localStorage.getItem('cart')初始化购物车状态 - 在每次添加/删除后持久化：
localStorage.setItem('cart', JSON.stringify(cartItems)) - 如果使用，同步 productIdsInCart：
localStorage.setItem('cart_ids', JSON.stringify(ids)) - 跨会话防止重复（刷新、新标签页）
CartContext 模式
const addToCart = (item: CartItem) => {
if (!productIdsInCart.includes(item.id)) {
setCartItems(prev => [...prev, item]);
setProductIdsInCart(prev => [...prev, item.id]);
localStorage.setItem('cart', JSON.stringify([...cartItems, item]));
}
};
反模式
- 不要在 ProductCard 挂载的 useEffect 中添加到购物车（导致重复）
- 不要在多个组件中重复逻辑 — 使用上下文
- 作为数据完整性的回退，添加后端验证
数量更新
对于同一产品的数量更新：使用cartItems.map() 更新 item.quantity，不要创建重复条目。数据来源：ClawHub ↗ · 中文优化：龙虾技能库