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

我是一名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;

从“React”导入React；
从'react router dom'导入{useParams}；
函数AddToBasket（）{
const id=useParams（）.id；
让cartProduct=[]；
让cartQty=[]；
函数handleClick（AddToBasket，e）{
if（localStorage.getItem（'cartProduct'）！=null）{
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++}）
setItem（'cartProduct'，JSON.stringify（localProduct））；
localStorage.setItem（'cartQty'，JSON.stringify（localQty））；
}
否则{
localProduct.push（id）；
本地推送数量（1）；
console.log（cartProduct）；
setItem（'cartProduct'，JSON.stringify（localProduct））；
localStorage.setItem（'cartQty'，JSON.stringify（localQty））；
}
}
否则{
cartProduct.push（id）；
推车推送数量（1）；
console.log（cartProduct）；
localStorage.setItem（'cartProduct'，JSON.stringify（cartProduct））；
localStorage.setItem（'cartQty'，JSON.stringify（cartQty））；
}
}
返回(
帕尼埃酒店
)
}
导出默认AddToBasket；

---

我的代码有什么问题？提前感谢您的反馈

当编译器在找到特定ID后到达else部分时，它总是将1推到数量。我看这里没有任何增量。因此，

localQty

重复地被赋值为1。试着增加这个值。您使用的是纯JavaScript，这里没有使用React。如果您不完全了解JS，请不要继续使用ReactJS，因为您可能会讨厌这个库。希望能有帮助