将现有商品添加到购物车后，其他值变为空

Question

所以我尝试使用上下文和本地存储创建购物车。添加到购物车已经完成并且可以工作。但是当我尝试添加购物车中已有的商品时，我收到此错误。我使用 find() 和 map() 来查找并检查购物车中是否已存在的 id，是否将该商品添加到购物车中并增加数量。 但是当我这样做时，购物车中的其他商品会变得不足吗？

这是我的 cartcontext.js：

import { createContext, useContext, useState, useEffect } from "react";
// import { Items } from "../../Data/AllDatas";

const CartContext = createContext();

export const CartProvider =({children})=>{
      // const [cartItem, setCartItem] = useState([])

      const [cartItem, setCartItem] = useState(() => {
            const json = localStorage.getItem('cartItem');
            return json ? JSON.parse(json) : [];
        });
      const [qty, setQty] = useState(1);
      const [showCart, setShowCart] = useState(false);
      const [totalQty, setTotalQty] = useState(0);
      const [totalPrice, setTotalPrice] = useState();
      const increaseQty = ()=>{
            setQty(prevQty => prevQty+1)
      }
      const decreaseQty = () =>{
            setQty((prevQty)=>{
                  if(prevQty - 1< 1)return 1
                  return prevQty-1
            })
      }
      useEffect(() => {
            const json = localStorage.getItem('cartItem');
            const savedCart = JSON.parse(json);
            if (savedCart) {
                setCartItem(savedCart);
            }
            console.log("LocalStorage data:", savedCart);
        }, []);

      useEffect(() => {
            const json = JSON.stringify(cartItem);
            localStorage.setItem("cartItem", json);
      }, [cartItem]);

      // {id: 1, quantity :1}
      const addToCart = (Item, quantity)=>{
            setTotalPrice((prevTotalPrice)=>prevTotalPrice + prevTotalPrice*quantity)
            setTotalQty((prevTotalQty)=> prevTotalQty + quantity)
            const checkProduct = cartItem.find((product)=> product.id === Item.id)
            if(checkProduct){
                  const updateCart = cartItem.map((product)=>{
                  if(product.id === Item.id)return{
                        ...product,
                        quantity: product.quantity + quantity,
                  }
                 })
                 setCartItem(updateCart);
                 setQty(1);
            }
            else{
                  Item.quantity = quantity;
                  setCartItem([...cartItem, {...Item}])
      }  
      }

      const contextValue = {
            showCart,
            qty,
            totalPrice,
            increaseQty,
            decreaseQty,
            totalQty,
            addToCart,
            setShowCart,
            setCartItem,
            cartItem
      }


      return(
            <CartContext.Provider value ={contextValue}>
                  {children}
            </CartContext.Provider>
      )
}
export const useCartProvider = () => useContext(CartContext)

``

这是product.js

import React, {useState, useEffect } from 'react'
import {Items} from '../../Data/AllDatas'; 
import { useParams } from 'react-router';
import './Product.css';
import {useCartProvider} from '../CartProvider/CartContext';
const Product = () => {
  const {id} = useParams();
  const Item = Items.filter((Item) => Item.id === parseInt(id));
  const [image, setImage] = useState(Item[0].front)
  const {qty, decreaseQty, increaseQty, addToCart} = useCartProvider()
  const changeImage= (e) =>{
    setImage(e.target.src)
  }
  

  return (  
    <div className='containerProduct'>
      <div className='route'>
        <p>Home/ </p>
        <p>Ready To Wear/ </p>
        <p> {Item[0].des}</p>
      </div>
      <div>
        <div className='productDisplay'>
          <div className='left'>
            <div className='smallImg'>
                <img src={Item[0].front}
                onClick={changeImage}/>
                <img src={Item[0].back}
                onClick={changeImage}/>
            </div>
            <div className='bigImg'>
              <img src={image} alt={image}/>
            </div>
          </div>
          <div className='right'>
            <p>{Item[0].des}</p>
            <h4>{Item[0].price}</h4>
            <div className='addItem'>
              <h1>Quantity: </h1>
              <button onClick={decreaseQty}>-</button>
              <h1>{qty}</h1>
              <button onClick={increaseQty}>+</button>
            </div>
            <div className='button'>
              <button 
              onClick={() => addToCart(Item[0], qty)}
              >
                Add to cart
              </button>
              <button>Buy now</button>
            </div>
          </div>
        </div>
      </div>
      <div className='des'>
            <p>Detail: {Item[0].detail}</p>
      </div>
    </div>
  )
}

export default Product;

你们以前见过这个或者有解决这个问题的想法吗？ 这在过去的几个小时里确实令人头痛。

Answer 1

问题出在 addCart 函数中的 map 方法。

map()方法中的回调函数会为Array的每个元素调用，并期望返回一个元素，但是当项目的id不匹配时，您不会返回任何内容，这就是其他值变得未定义的原因。

请参阅此示例以更好地理解

const arr = [4, 1, 2, 9];

const mp = arr.map((x) => {
  if (x === 1) {
    return "Hello";
  }
});

console.log(mp);
// Expected output: Array [undefined, "Hello", undefined, undefined]

解决方案：像这样修改addCart函数中的地图方法

const updateCart = cartItem.map(product => {
  if(product.id === Item.id) return {
     ...product,
     quantity: product.quantity + quantity,
  }
  return product;
})