嘗試從 JavaScript 中的 localStorage 查找現有產品時出錯

Question

我正在嘗試使用 localStorage 實現購物車系統，代碼如下，我是如何嘗試實現的

const data = {
    description: "Cum sociis natoque",
    mediaUrl: "/products-img7.jpg",
    name: "Hearing Aid Device",
    newProduct: true,
    onOffer: "5",
    onSale: true,
    price: "99.57",
    productType: "medical",
    sku: "534-20-2675",
    viewCount: 0,
    _id: "5f095b0bd7f2be792ee6ba1c",
}

const handleAddToCart = (data, quantity = 1) => {
    let getCarts = JSON.parse(localStorage.getItem('myCart'))
    let existed_item = null
    if(getCarts || getCarts != null){
        existed_item = getCarts.find(item => item._id == data._id) // Error in that line
    }

    if (existed_item) {
        let cartItem = Object.assign({}, existed_item, {quantity: (quantity + existed_item.quantity)})
        localStorage.setItem('myCart', JSON.stringify(cartItem))
    } else {
        let cartProducts = new Array()
        if(localStorage.getItem('myCart')){
            cartProducts = JSON.parse(localStorage.getItem('myCart'))
        }
        let dataWQty = Object.assign({}, data, {quantity: quantity});
        let newCartProducts = [...cartProducts, dataWQty]

        localStorage.setItem('myCart',JSON.stringify(newCartProducts));
    }
}

從上面的代碼得到低於錯誤

Unhandled Runtime Error <br/>
TypeError: getCarts.find is not a function

我現在該如何克服這種情況？ 我真的需要幫助來解決這個問題。

提前致謝。

Answer 1

我認為您首先需要更改在獲取數組時更新項目的邏輯，但是當您第一次更新它時將其替換為 object

let getCarts = JSON.parse(localStorage.getItem('myCart'))
let existed_item_index = -1
if(getCarts || getCarts != null){
    existed_item_index = getCarts.findIndex(item => item._id === data._id)
}

if (existed_item_index!==-1) {
    const updatedCarts = JSON.parse(JSON.stringify(getCarts));
    updatedCarts[existed_item_index].quantity += quantity;
    localStorage.setItem('myCart', JSON.stringify(updatedCarts));
}