仅使用Frontend(React)实现小店限库存商品购买限制及库存展示方案咨询

方案说明 #

疑问1解答：纯前端限购实现（无后端/数据库） #

• 纯前端只能实现单用户维度的购买限制，无法实现全局20件的总库存限制：所有前端状态仅存在当前用户本地，不同用户之间数据不互通，无法统计所有用户的总购买量。
• 单用户限购实现方式：
  1. 首先在你的商品JSON数据中为该限量款新增stock字段，赋值为20，也可新增limitPerUser字段设置单人限购上限（比如单人最多买2件）
  2. 修改加购逻辑，加购时校验数量不超过限制：

const onAdd = (product) => {
    const exist = cartItems.find((x) => x.id === product.id);
    // 限量商品校验
    if (product.stock) {
        const currentCartQty = exist ? exist.qty : 0;
        // 校验1：加购后不超过单用户限购上限（如果有设置）
        if (product.limitPerUser && currentCartQty + 1 > product.limitPerUser) {
            alert(`该商品每人最多限购${product.limitPerUser}件`);
            return;
        }
        // 校验2：加购后不超过总库存（仅单用户端校验，无法限制全局总销量）
        if (currentCartQty + 1 > product.stock) {
            alert('该商品库存不足');
            return;
        }
    }
    if (exist) {
        setCartItems(
            cartItems.map((x) =>
                x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x
            )
        );
    } else {
        setCartItems([...cartItems, { ...product, qty: 1 }]);
    }
};

• 该方案仅作为前端拦截层，避免用户单账号超买，但无法控制全局总销量不超过20件。

疑问2解答：实时展示全局剩余库存&全局限购实现 #

• 仅用现有静态JSON API无法实现该需求，静态JSON不会动态更新，也无法同步多用户的购买数据，必须搭配轻量存储服务，不需要迁移所有商品数据，仅需单独存储该限量款的剩余库存即可。
• 实现步骤：
  1. 选择轻量存储：可以用Firebase、Supabase、Cloudflare KV、Vercel KV这类免运维的存储服务，仅创建一条数据存储该商品ID和剩余库存值
  2. 页面加载时，除了拉取原有商品JSON，额外请求存储服务的接口获取该限量款的实时库存，覆盖商品的stock字段
  3. 加购时除了前端校验，提交订单前先调用存储服务的接口扣减库存，扣减成功再走后续下单逻辑
  4. 如果要实时更新库存，可以给库存接口加订阅监听，库存发生变化时自动更新前端展示的剩余数量，不需要用户刷新页面。

内容的提问来源于stack exchange，提问作者user13696121