仅用于数据结构和数据库的前端（React）解决方案答案

【问题标题】：Frontend (React) only solution for data structure and database仅用于数据结构和数据库的前端（React）解决方案
【发布时间】：2021-09-22 09:38:45
【问题描述】：

问题定义

我有一个小商店的 React App，所有产品都来自 JSON 文件 作为外部 API，因为我在前台处理所有事情。

但我刚刚购买了一款数量有限的产品 -> 我只有 20 件该产品，我不确定如何限制用户购买的数量超过我实际拥有的数量。

问题

有没有一种方法（最简单）我可以在不使用数据库或后端的情况下限制该产品的数量？
有没有一种方法可以实际向用户展示该特定产品还剩下多少？ （想象它是限量版 -> 每次购买后剩余的产品数量都会实时更新）

仅使用 API 是否有可能，还是我必须将所有内容都还原到数据库中（例如 firebase）？

我喜欢的任何建议和示例链接！

这就是我目前处理无限量产品的方式

// fetch data here

    const fetchData = () => {
            fetch('myAPIendpoint')
                .then((response) => response.json())
                .then((data) => {
                    setProducts(data);
                })
                .catch((error) => {
                    console.log(error);
                });
        };
        React.useEffect(() => {
            fetchData();
        }, []);

// 将产品添加到购物车

const onAdd = (product) => {
    const exist = cartItems.find((x) => x.id === product.id);
    if (exist) {
        setCartItems(
            cartItems.map((x) =>
                x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x
            )
        );
    } else {
        setCartItems([...cartItems, { ...product, qty: 1 }]);
    }
};

// 映射商品以在购物车中显示

 {cartItems.map((item) => (
.....
.....

【问题讨论】：

数据从何而来？如果您使用 Firebase 实时数据库（或 Firestore）并监听更改，那么它应该更新所有用户的计数。
我正在为我的数据使用手动创建的 API。
是的，但我们不知道它是如何工作的。你能分享代码以便更容易理解吗？
那么这个问题与 Firebase 有什么关系？
如果有多个客户将使用该网站，您需要有一些方法来存储一个客户购买 n 数量后的新项目总数的结果，所以下一位客户正在查看产品的更新总数。唯一的方法是通过对服务器上的 API 端点的 POST 调用来更新该产品的总数。如何存储这些数据取决于您。

标签： javascript reactjs database firebase frontend

【解决方案1】：

您可以直接重写 JSON 文件中留下的产品数量。

例如。有人购买了一些产品 -> 请求发送到您的 API -> 您正在阅读 JSON 文件，通过 id(.find(product => producct.id === id)) 查找产品。然后您正在检查产品的数量（您是否需要数量），如果没有，则返回一些错误，如果是，那么您正在为当前产品重写产品内部文件的数量属性并执行其他业务逻辑。

处理文件取决于您在后端使用的技术/编程语言。您可以单独查找。

【讨论】：