如何避免商品被重复添加至React wishlist（收藏列表）

• 商品唯一标识未正确配置
  react-use-wishlist 默认使用id字段作为商品的唯一识别依据。如果你的商品数据中使用的是其他唯一字段（比如productId、sku），但没有在初始化时指定idProp参数，库会无法正确识别重复商品，导致每次调用toggleWishlist都判定为新商品并添加。
  解决：初始化时配置idProp，例如：

  const { toggleWishlist } = useWishlist({ idProp: 'productId' });
  

• 商品对象引用频繁变更
  若每次调用toggleWishlist时传入的是新创建的对象（比如组件每次渲染都生成新的商品对象实例），即使对象内容完全一致，库内部的引用比较会认为这是不同的商品，从而重复添加。
  解决：用useMemo缓存商品对象，确保每次传入的是同一引用：

  const product = useMemo(() => ({ id: 1, name: '商品名称' }), []);
  

• 自定义判断逻辑与库状态不同步
  如果你自行维护了收藏状态的判断逻辑（而非依赖库提供的isInWishlist方法），可能因为状态更新的异步性，导致判断出错，重复触发添加操作。
  解决：直接使用库返回的isInWishlist方法判断商品是否在收藏列表中，例如：

  const { isInWishlist, toggleWishlist } = useWishlist();
  const handleToggle = () => toggleWishlist(product);
  

• 库版本存在已知bug
  旧版本的react-use-wishlist可能存在逻辑漏洞，导致重复添加问题。
  解决：升级到最新稳定版本，重新测试功能。

内容的提问来源于stack exchange，提问作者Pasha Mammadov