如何解决购物车的未定义错误？

Question

我一直在构建一辆购物车，并遇到了最后一个错误，该错误使我无法完成，并且我无法找出解决方案。我能够从购物车中添加和删除商品，但是当购物车为空并且我单击从购物车中删除时，应用程序崩溃并给出以下错误“TypeError：无法读取未定义的属性（读取“数量”） ”

下面是购物车组件的代码，我正在其中处理向购物车中删除和添加商品的情况

import { createContext, useState, useEffect } from 'react'
import  React from 'react'
import products from '../components/product';
export const CartContext = createContext()

export const CartProvider = ({ children }) => {
  const [cartItems, setCartItems] = useState(localStorage.getItem('cartItems') ? JSON.parse(localStorage.getItem('cartItems')) : [])

  const addToCart = (item) => {
    const isItemInCart = cartItems.find((cartItem) => cartItem.id === item.id);

    if (isItemInCart) {
      setCartItems(
        cartItems.map((cartItem) =>
          cartItem.id === item.id
            ? { ...cartItem, quantity: cartItem.quantity + 1 }
            : cartItem
        )
      );
    } else {
      setCartItems([...cartItems, { ...item, quantity: 1 }]);
    }
  };

  const removeFromCart = (item) => {
    const isItemInCart = cartItems.find((cartItem) => cartItem.id === item.id);

    if (isItemInCart.quantity === 1) {
      setCartItems(cartItems.filter((cartItem) => cartItem.id !== item.id));
    } else {
      setCartItems(
        cartItems.map((cartItem) =>
          cartItem.id === item.id
            ? { ...cartItem, quantity: cartItem.quantity - 1 }
            : 0,
          )
      );
    }
  };

  const clearCart = () => {
    setCartItems([]);
  };

  const getCartTotal = () => { 
    // cart item total is being added here
    return cartItems.reduce((total, cartItem) => total + cartItem.price * cartItem.quantity, 0);
  };

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

  useEffect(() => {
    const cartItems = localStorage.getItem("cartItems");
    if (cartItems) {
      setCartItems(JSON.parse(cartItems));
    }
  }, []);

  const initialValue = 0;
  const total = cartItems.reduce((accumulator,current) => accumulator + current.price * current.quantity, initialValue)


  return (
    <CartContext.Provider
      value={{
        cartItems,
        addToCart,
        removeFromCart,
        clearCart,
        getCartTotal,
      }}
    >
      {children}
    </CartContext.Provider>
  );
};

下面是显示商品的产品页面

import React from 'react'
import RemoveIcon from '@mui/icons-material/Remove';
import AddIcon from '@mui/icons-material/Add';
import Stack from '@mui/material/Stack';
import Badge from '@mui/material/Badge';
import { useContext, useEffect, useState } from 'react'
import stockmug from '../images/stockmug.jpg'
import ShoppingCartWidgit from './ShoppingCart'
import products from "./product";
import ShoppingCartCheckoutIcon from '@mui/icons-material/ShoppingCartCheckout';
import { makeStyles } from "@material-ui/core/styles";
import Switch from '@mui/material/Switch';
import { CartContext } from '../context/cart'
import Cart from './CheckOutCart'
import CheckOutModal from './CheckOutModal'
import {
  Grid,
  Card,
  CardContent, Button,
  Typography,
  CardHeader, CardMedia,
} from "@material-ui/core/";
import tinkerbell from '../images/tinkerbell.jpg'
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    padding: theme.spacing(2)
  },
  cards: {
    marginTop: theme.spacing(2)
  }
}));
export default function Products() {
  const { cartItems, addToCart, removeFromCart, clearCart, getCartTotal } = useContext(CartContext)
  // getting stored value
  const classes = useStyles();
  // ],   
  // id for prouctremove
  //  cart added here
  return (
    <>
      <div className={classes.root}>
        <Grid
          container
          spacing={2}
          direction="row"
          justify="flex-start"
          alignItems="flex-start"
        >
          {/* <Grid item xs={12}> */}
          {products.map((products) => (
            <Grid
              item
              xs={6} sm={4}
              className={classes.cards}
              key={products.id}
            >
              <Card>
                <CardHeader
                  title={products.title}
                  subheader={products.price} />
                <CardMedia
                  component="img"
                  alt="a litter of puppies inside their doggie bed"
                  height="140"

                  image={products.imageId} />
                <CardContent>
                  <Typography
                    description={products.description}
                    quantity={products.quantity}
                    variant="h5" gutterBottom>
                    <Stack direction="row" spacing={2}>
                      <Button
                        onClick={() => {
                          addToCart(products)
                        }}
                        size="large" variant="contained" endIcon={<AddIcon />}>
                        Add To  Cart
                      </Button>
                      <Button
                        onClick={() =>
                          removeFromCart(products)
                        }
                        id="RemoveFromCart"
                        size="large" variant="contained" endIcon={<RemoveIcon />}>
                        Remove From  Cart
                      </Button>
                    </Stack>
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          ))}
          {/* </Grid> */}
        </Grid>
      </div>
      <Badge badgeContent={0}
        color="primary">
        <ShoppingCartCheckoutIcon size="large" color="action" />
      </Badge></>
  );
}

我有点不确定如何解决这个问题。弹出的错误消息显示了这个

  if (isItemInCart.quantity === 1) {
     | ^   |      setCartItems(cartItems.filter((cartItem) => cartItem.id !== item.id));
  30 |    } else {
  31 |      setCartItems(

我该如何解决这个问题？

Answer 1

如果没有找到项目，

const isItemInCart = cartItems.find((cartItem) => cartItem.id === item.id);

将返回

undefined

isItemInCart.quantity

会抛出错误，因为

undefined.quantity

不是一个东西

简单修复：使用

?.

而不是

.

isItemInCart?.quantity