react-use-cart需id字段但API返回_id，如何适配使用？

react-use-cart的addItem方法要求商品对象必须包含id字段，但你的API返回的商品数据使用的是_id字段（常见于MongoDB返回结果），可以通过以下两种方式完成字段转换，让库正常工作：

方式一：获取商品数据时直接转换字段 #

在产品详情页获取API数据后，通过对象解构重组，将_id赋值给id字段，同时保留其他原有字段：

// 产品详情页Index.js 示例代码
const fetchProduct = async () => {
  const res = await fetch(`/api/products/${productId}`);
  const rawProduct = await res.json();
  // 转换字段：将_id映射为id，保留其他所有字段
  const product = { ...rawProduct, id: rawProduct._id };
  setProduct(product);
};

// 调用addItem时直接传入转换后的对象
const { addItem } = useCart();
const handleAddToCart = () => {
  addItem(product);
};

方式二：封装addItem方法统一处理 #

如果多个页面都需要调用addItem，可以封装一个自定义Hook统一处理字段转换，避免重复代码：

// 自定义Hook文件（比如useAdaptedCart.js）
import { useCart } from 'react-use-cart';

export const useAdaptedCart = () => {
  const originalCart = useCart();

  // 封装适配后的addItem方法
  const addItem = (product) => {
    // 仅当商品没有id但有_id时才转换
    const adaptedProduct = product.id ? product : { ...product, id: product._id };
    originalCart.addItem(adaptedProduct);
  };

  // 保留原购物车的其他方法，替换addItem为适配后的版本
  return { ...originalCart, addItem };
};

之后在产品详情页和购物车页，用这个自定义Hook替代原生的useCart：

// 产品详情页Index.js
import { useAdaptedCart } from './useAdaptedCart';

const { addItem } = useAdaptedCart();

这两种方式都能确保传入addItem的商品对象包含要求的id字段，同时保留原有数据的完整性。

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