📦 Cart Management — React 购物车状态管理
v1.0.0提供 React 购物车状态管理解决方案，包括防止重复添加、localStorage 持久化、CartContext 模式。适用于构建或修复购物车、产品列表等场景。
0· 468·2 当前·3 累计
by 安全扫描
OpenClaw
安全
medium confidence该技能与其声明的目的（React 购物车状态模式）一致，但运行时指令中包含实现错误和不完整的指导（localStorage/SSR/XSS 隐患和过时状态竞争条件），开发者应注意。
评估建议
该技能看起来是如其所言（React 购物车模式），且没有不寻常的外部要求。使用建议代码前，请：1) 修复过时状态 bug；2) 避免复制派生状态；3) 为服务器端渲染保护 localStorage 使用；4) 避免存储敏感信息；5) 考虑延迟或批量持久化以安全处理并发更新。这些是实现质量和安全相关问题，而非恶意行为的迹象。...详细分析 ▾
✓ 用途与能力
名称/描述（React 购物车管理、防止重复、localStorage 持久化、CartContext 模式）与 SKILL.md 指令匹配。没有不相关的二进制文件、环境变量或安装程序被请求。
ℹ 指令范围
指令保持在购物车管理范围内，但包含实际问题：示例将 localStorage 写入 [...cartItems, item]（不使用函数式 'prev' 值），可能导致过时状态/竞争 bug；它复制了派生状态（购物车 ID），可能导致不一致；它没有提到为 SSR 保护 localStorage 访问（窗口可能未定义）或处理 JSON.parse 错误。另外，没有关于 localStorage 可被页面脚本访问（XSS 风险）的警告。
✓ 安装机制
仅指令的技能，无安装规范或下载。低安装风险 — 安装程序不会将内容写入磁盘。
✓ 凭证需求
没有请求凭证、环境变量或配置路径。声明的要求对于描述的客户端任务来说是最小的和合适的。
✓ 持久化与权限
always 为 false，该技能不请求持久平台权限或修改其他技能。它仅推荐使用浏览器 localStorage，适合客户端购物车模式，但具有通常的浏览器存储权衡。
安全有层次，运行前请审查代码。
运行时依赖
无特殊依赖
版本
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，不要创建重复条目。