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

Question

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

1）我正在尝试检查客户请求的尺寸是否可用。

2）如果它不可用，我想运行一个 function，它将：

2A) 将选择的 object 添加到阵列中。

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) 我希望 object 在每次点击后更新为类似的内容。

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中工作。 我刚刚对代码沙箱进行了更改