我无法使用react和javascript在本地存储中保存订购商品的数量

Question

我是JavaScript初学者。我正在尝试创建一个组件，以使用本地存储通过React将产品添加到购物车中。我设法通过单击按钮来注册我的产品ID，但是我不能多次订购已订购产品的数量。这是我的作曲家：

import React from 'react';
import {useParams} from 'react-router-dom';

function AddToBasket() {
const id = useParams().id;

let cartProduct = [];
let cartQty = [];

  function handleClick(AddToBasket,e) {

    if (localStorage.getItem('cartProduct') != null) {
        console.log(localStorage.getItem('cartProduct'));
        var localProduct = JSON.parse(localStorage.getItem('cartProduct'));
        var localQty = JSON.parse(localStorage.getItem('cartQty'));



        if (localProduct.indexOf(id)!== -1) { 
            var indexId = 0;
            indexId = localProduct.indexOf(id); 
            console.log(indexId);
            localProduct.forEach((indexId) => {
            localProduct.push(id);
            localQty++})
            localStorage.setItem('cartProduct', JSON.stringify(localProduct));
            localStorage.setItem('cartQty', JSON.stringify(localQty));
        }

        else {
            localProduct.push(id);
            localQty.push(1);
            console.log(cartProduct);
            localStorage.setItem('cartProduct', JSON.stringify(localProduct));
            localStorage.setItem('cartQty', JSON.stringify(localQty));
        }

    }

    else {
        cartProduct.push(id);
        cartQty.push(1);
        console.log(cartProduct);
        localStorage.setItem('cartProduct', JSON.stringify(cartProduct));
        localStorage.setItem('cartQty', JSON.stringify(cartQty));
    }

}

    return (
        <button onClick={handleClick}>Ajout au panier</button>
        )

}

export default AddToBasket;

我的代码有什么问题？预先感谢您的反馈

Answer 1

[当编译器找到特定ID后到达else部分时，它总是将1推入数量。我在这里看不到任何增量。因此，localQty被反复分配值1。尝试增加该值。您使用的是纯JavaScript，此处没有使用React。如果您不完全了解JS，请不要继续使用ReactJS，因为您可能最终讨厌该库。希望能有所帮助！..