如何在第一次單擊時將 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中工作。 我剛剛對代碼沙箱進行了更改