javascript - 当我尝试增加一件商品的数量时，购物车中的其他商品数量也会增加

Question

我正在尝试建立一个电子商务网站，但在购物车页面中，我对数量增量的逻辑实现感到困惑。假设我的购物车中有超过 1 件商品，当我尝试增加一件商品的数量时，购物车中的其他商品也会增加。

当用户单击ADD TO CART按钮时，我正在使用 localstorage 存储购物车详细信息。

请帮我！

代码：cartDetails.jsx

import React from 'react'
import { useState, useEffect } from 'react'
import '../../src/cart-details.css'
import Tooltip from '@material-ui/core/Tooltip';
import Button from '@material-ui/core/Button';
function CartDetails(props) {
  let ele1;
  let {cno}=props;
  const[ele, setEle]=useState('');
  let[qty, setQty]=useState(1)
  // let [totalPrice.setTotalPrice]=useState()
  let[data,setData]=useState([])

const incrementQty = (index) =>{
    setQty(qty++)
    console.log(index)
}
const decrementQty = (index) =>{
  setQty(qty--)
  console.log(index)
}

      {data.map((item,index)=>(
      <div className="cart_cont  desktop text-dark" key={index}>
            <div className="innerDiv row m-auto  mt-4  d-flex shadow-lg container">
              {/* <div className="split1"> */}
                  <div className="d-flex justify-content-around align-items-center flex-column col-sm d-flex id">
                      <label htmlFor="id" className="text-danger fw-bold m-auto">ID</label>
                      <p className="m-auto" id="id">{item.id}</p>
                  </div>
                  <div className="d-flex  col-sm  thumbnail">
                      <img src={item.image} className="mt-1 mb-1" alt="image" height="100px" width="80px"/>
                  </div>
                  <div className="d-flex align-items-center flex-column col-sm  quantity">
                      <label htmlFor="title" className="text-danger fw-bold m-auto">Title</label>
                      <p className="m-auto" id="title">{item.title}</p>
                  </div>
                  <div className="d-flex align-items-center col-sm  flex-column unitPrice">
                      <label htmlFor="unitprice" className="text-danger fw-bold m-auto">Unit Price</label>
                      <p className="m-auto unitprice" id="unitprice">Rs. {item.price}</p>
                  </div>
                  <div className="d-flex align-items-center col-sm  flex-column unitPrice">
                      <label htmlFor="unitprice" className="text-danger fw-bold m-auto">Quantity</label>
                      <div className="btns_mob m-auto d-flex flex-row mx-4">
                              <button className="btn btn-outline-primary mx-1" onClick={()=>decrementQty(index)}>-</button>
                              <button className="btn disabled btn-dark mx-1">{qty}</button>
                              <button className="btn btn-outline-primary mx-1" onClick={()=>incrementQty(index)}>+</button>
                      </div>
                  </div>
                  <div className="d-flex align-items-center flex-column col-sm  total">
                      <label htmlFor="total" className="text-danger fw-bold m-auto">Total</label>
                      <p className="m-auto total" id="total">N/A</p>
                  </div>
                  <div className="d-flex align-items-center  col-sm  rmBtn">
                  <Tooltip title="Delete item">
                      <i className="far fa-2x m-auto fa-trash-alt" id={index} onClick={(btn)=>{
                        btn.preventDefault();
                        console.log('index'+index)
                      let arr= JSON.parse(localStorage.getItem('cartDetails'))
                      if(JSON.parse(localStorage.getItem('cartDetails')).length>1)
                        {
                          ele1 = arr.splice(index-1,1)
                        }
                        else
                        {
                          ele1 = arr.splice(index+1,1)
                        } 
                      console.log(ele1)
                      // arr.splice(btn.target.id,1)
                      localStorage.setItem('cartDetails',JSON.stringify(ele1))
                      cno(JSON.parse(localStorage.getItem('cartDetails')).length)
                        // setEle(ele1)
                      }}></i></Tooltip>
                  </div>
                  </div>
            </div>
       ))
      }

请帮我

标签： javascriptreactjsjson