如何在第一次单击时将对象添加到数组中，并在之后的每次单击时更新其值

Question

我正在开发一个 React 购物车，我正在尝试根据我在解释我的问题后展示的数组来完成以下操作：

1) 我正在尝试检查客户端请求的大小是否可用。

2) 如果它不可用，我想运行一个函数：

2A) 将所选对象添加到数组中。

2B) 在随后的每次点击中，我都想更新库存，以确保它提醒客户该商品不再有库存，并且我想将一个我想称为“数量”的新元素增加一个.

3) 这是我当前的尺寸数组：

[ 0: size: 3 stock: 140
_id: "5d903adb01cdab06932b5566"

1: size: 3.5 stock: 130
_id: "5d903adb01cdab06932b5565"

2: size: 4 stock: 10
_id: "5d903adb01cdab06932b5564"

3: {_id: "5d903adb01cdab06932b5563",  size: 4.5,  stock: 30}

4: size: 5 stock: 53
_id: "5d903adb01cdab06932b5562" ]

4) 这些是我正在运行的函数：

onClick={() => this.alertBox(prod, arr, item)}

alertBox = (product, products, count) => {
        console.log(count)
        let newStock;
        let clickedSize;
        let selectedProduct;

        if (product.stock === 0) { 
            alert('The item is currently out of stock')
        } else {
            newStock = product.stock -= 1;  
            clickedSize = product.size;
            selectedProduct = product._id;
            let newProducts;
            let quantity = 0;

            products.map((item) => {
                return item._id === product._id ? 
                    newProducts = [...this.state.chosenSize , {...item, ...newStock }]
                    : product
            });
            const tester = [];
            const result = [];
            const newSize = [];
            let quantities = [];
            let items;
            let newIt;

            newProducts.forEach(function(el) {
                if (tester.indexOf(el._id) === -1) {
                    tester.push(el._id)
                    result.push(el)
                    items = {...el}
                }
            });

            let newArray = result.map((item, i) => Object.assign({}, item, item.stock -= 1));

            this.setState(prevState => ({
                chosenSize: newArray
            }))

        }
    }

和

onClick={() => this.onUpdateItem(idx, arr, prod)}

onUpdateItem = (i, product, prod) => { 
       let newProd = product.stock;
           this.setState({
            chosenSize: product.map(el => (el._id === prod._id ? Object.assign({}, el, el.stock -= 1) : el))
     }); 

    };

7) 我希望对象在每次点击后更新为类似的内容。

3：{_id：“5d903adb01cdab06932b5563”，尺寸：4.5，库存：30，数量： 1 }

到

3：{_id：“5d903adb01cdab06932b5563”，尺寸：4.5，库存：29，数量： 2 }

到

3：{_id：“5d903adb01cdab06932b5563”，尺寸：4.5，库存：28，数量： 3 }

这是该项目的代码沙箱，尽管出于某种原因它不再呈现我的组件。代码在 ProductPage 文件 codesandbox.io/s/mystifying-roentgen-7mp0t 中。

编辑

抱歉，代码沙箱现在可以工作了，您只需单击其中一项，它就会带您进入产品页面 http://codesandbox.io/s/mystifying-roentgen-7mp0t

Answer 1

您应该使用import { Link } from "react-router-dom"; 使Link 在Product.js 中工作。我只是对代码沙箱进行了更改