Javascript 实现只向购物车添加一次商品ID的功能

所以我想知道我该如何做到这一点，我只想在购物车中添加一次商品ID，并在按钮添加时添加一些文本，如添加商品等。。。我将如何处理它。我需要做什么。我真的很想得到一些好的指导。提前谢谢

上下文API

import React from "react";

function getCartFromLocalStorage() {
  return localStorage.getItem("cart")
    ? JSON.parse(localStorage.getItem("cart"))
    : [];
}

const CartContext = React.createContext({});
function CartProvider({ children }) {
  const [cart, setCart] = React.useState(getCartFromLocalStorage());
  const [total, setTotal] = React.useState(0);
  const [cartItems, setCartItems] = React.useState(0);

  function onUpdate() {
    localStorage.setItem("cart", JSON.stringify(cart));
    console.log(cart);
    const newTotal = cart.reduce(
      (total, cartItem) => total + cartItem.amount * cartItem.price,
      0
    );
    setTotal(newTotal);
    const newCartItems = cart.reduce(
      (total, cartItem) => total + cartItem.amount,
      0
    );
    setCartItems(newCartItems);
  }
  React.useEffect(onUpdate, [cart]);

  const removeItem = (id) => {
    setCart([...cart].filter((item) => item.id !== id));
  };

  /* add to cart */
  const addToCart = (book) => {
    const { id, image, bookName, by } = book;
    let item = cart.find((item) => item.id === id);
    if (item) {
      item.amount++;
      onUpdate();
    } else {
      setCart(
        cart.concat({
          amount: 1,
          price: parseFloat(book.RegularPrice.replace("$", "")),
      
          ...book
        })
      );
    }
  };

  const clearCart = () => {
    setCart([]);
  };
  return (
    <CartContext.Provider
      value={{
        cart,
        cartItems,
        total,
        removeItem,
        addToCart,
        clearCart
      }}
    >
      {children}
    </CartContext.Provider>
  );
}

export { CartContext, CartProvider };

从“React”导入React；
函数getCartFromLocalStorage（）{
返回localStorage.getItem（“购物车”）
？JSON.parse（localStorage.getItem（“购物车”））
: [];
}
const CartContext=React.createContext（{}）；
函数提供程序（{children}）{
const[cart，setCart]=React.useState（getCartFromLocalStorage（））；
const[total，setTotal]=React.useState（0）；
常量[cartItems，setCartItems]=React.useState（0）；
函数onUpdate（）{
setItem（“cart”，JSON.stringify（cart））；
控制台日志（购物车）；
const newTotal=cart.reduce(
（总计，cartItem）=>总计+cartItem.amount*cartItem.price，
0
);
setTotal（新总数）；
const newCartItems=cart.reduce(
（总计，cartItem）=>总计+cartItem.amount，
0
);
setCartItems（newCartItems）；
}
React.useffect（更新[cart]）；
const removietem=（id）=>{
setCart（[…cart].filter（（item）=>item.id！==id））；
};
/*添加到购物车*/
const addToCart=（书本）=>{
const{id，image，bookName，by}=book；
让item=cart.find（（item）=>item.id==id）；
如果（项目）{
项目.金额++；
onUpdate（）；
}否则{
赛特车(
牛肝菌({
金额：1，
价格：parseFloat（book.RegularPrice.replace（“$”，”），
…书
})
);
}
};
常量clearCart=（）=>{
setCart（[]）；
};
返回(
{儿童}
);
}
导出{CartContext，CartProvider}；

书

import React，{useContext，ReactFragment}来自“React”
从“../../context/cart”导入{CartContext}；
从“./HoverBooks”导入悬停簿；
从“react router dom”导入{useHistory，Link}；
从“../../context/user”导入{UserContext}；
常量书籍=（{category}）=>{
const{addToCart}=useContext（CartContext）
const{user}=React.useContext（UserContext）；
报税表（
{category.slice（0,5）.map（（book）=>{
控制台日志（book）
返回(
{book.bookName}
作者：{book.By}
Narreed by:{book.narreed| | book[“narreed by”]}
长度：{book.Length | | book[“Length”]}
发布日期：{book.ReleaseDate}
语言：{book.Language}
评级：{book.Rating}
正常价格：{book.RegularPrice}
{user.authToken(
addToCart（书籍）
}
>添加到购物车
) : (
登录购买书籍
)}
)})}
)
}
导出默认书籍

您可以选择1。为数组中的每个元素添加布尔属性（添加：true/false）。或者，2。维护由添加项目的ID组成的地图或对象。

import React,{useContext, ReactFragment} from 'react'
import { CartContext } from '../../context/cart';
import HoverBooks from './HoverBooks';
import { useHistory, Link } from "react-router-dom";
import { UserContext } from '../../context/user';
const Books = ({category}) => {
const {addToCart }= useContext(CartContext)
const { user } = React.useContext(UserContext);

    return (     
        <div className='books__main'>      
        {category.slice(0, 5).map((book) => {   
          console.log(book)    
          return(
           <React.Fragment key={book.id}>
           <HoverBooks 
           key={book.id}
           {...book}       
           />    
           <div className='book__content'>
            <li className='book__name'>{book.bookName}</li>
             <h4 className='book__prop'>By: {book.by}</h4>
             <h4  className='book__prop'>Narreted by: {book.Narreted || book["Narreted by"]}</h4>
             <h4  className='book__prop'>Length: {book.length || book["Length"]}</h4>
             <h4  className='book__prop'>Release Date: {book.ReleaseDate}</h4>
             <h4  className='book__prop'>Language: {book.Language}</h4>
             <h4  className='book__prop'>Rating: {book.rating}</h4>
           </div>           
           <div className='book__adt'> 
           <h4>Regular Price: {book.RegularPrice}</h4>
           {user.authToken ? (
           <button className="adt__button" onClick={() => 
              addToCart(book)
           }
           >Add to cart</button>  
          ) : (
            <Link to="/login" className="adt__login">
            Login to buy books
           </Link>
        )}
           </div>
       </React.Fragment>
        )})}
      </div>
    )
}
export default Books