如何实现稀有书籍购物车单份限制及实时总价计算？

问题分析 #

你当前的代码存在两个核心问题：

1. 总价计算依赖旧状态：setTotalPrice中使用的items是更新前的旧值，因为setItems是异步操作，导致总价计算逻辑完全错误。
2. 未区分普通/稀有书籍：当前逻辑对所有书籍都执行“移除旧的、添加新的”操作，不符合仅限制稀有书籍的需求。

另外，单独维护totalPrice状态容易和cartItems不同步，建议直接基于购物车列表计算总价，从根源避免不一致问题。

修复步骤 #

1. 优化CartContext，自动计算总价

修改Context，用useMemo根据购物车项实时计算总价，不再单独维护currentPrice状态：

import { useState, useMemo, createContext } from 'react';

const CartContext = createContext();

function CartProvider({ children }) {
  const [cartItems, setCartItems] = useState([]);

  // 实时计算总价，避免状态不同步
  const totalPrice = useMemo(() => {
    return cartItems.reduce((sum, item) => sum + item.price, 0);
  }, [cartItems]);

  const contextValue = {
    items: cartItems,
    totalPrice,
    setItems: setCartItems,
  };

  return <CartContext.Provider value={contextValue}>{children}</CartContext.Provider>;
}

export { CartContext, CartProvider };

2. 修改BookCard组件，实现稀有书籍限制

给BookCard新增isRare属性（用于标识是否为稀有书籍），然后调整addToCart逻辑：

import { useContext } from 'react';
import { CartContext } from './CartContext'; // 导入你的Context

function BookCard({
  name,
  image,
  price,
  author,
  language,
  description,
  email,
  exchangeable,
  lendable,
  year,
  user,
  isRare, // 新增：标识是否为稀有书籍
}) {

  const { setItems, items } = useContext(CartContext);

  function addToCart() {
    setItems(prevItems => {
      if (isRare) {
        // 稀有书籍：移除已存在的同名称书籍，确保仅存一份
        const filtered = prevItems.filter(item => item.name !== name);
        return [...filtered, { name, price }];
      } else {
        // 普通书籍：直接添加（如果需要限制普通书籍也只能加一份，就复用上面的过滤逻辑）
        return [...prevItems, { name, price }];
      }
    });
  }

  // 组件其余渲染逻辑...
  return (
    <div className="book-card">
      {/* 书籍信息展示 */}
      <button onClick={addToCart}>加入购物车</button>
    </div>
  );
}

export default BookCard;

3. 使用说明

• 渲染BookCard时，给稀有书籍传入isRare={true}，普通书籍传入isRare={false}即可。
• 购物车的总价会自动根据cartItems实时计算，无需手动维护setTotalPrice，彻底解决计算错误问题。

内容的提问来源于stack exchange，提问作者Murtaza Alkabie