如何使用Commerce.js的retrieve方法实现点击查看商品详情并修复空数组报错

问题排查与修复方案 #

你的代码存在以下5个明确问题：

• 类型不匹配的初始值错误：productId的初始值被设置为空对象{}，但商品ID应为数字/字符串类型，初始空对象传入接口时会直接导致请求参数非法
• React状态更新异步问题：setProductId执行后无法立刻拿到最新的productId值，直接调用拉取接口时拿到的还是更新前的旧值
• 拉取逻辑无触发时机：fetchDetails函数仅完成定义，没有任何触发执行的逻辑，自然不会拉取数据更新details
• 语法错误：fetchDetails函数末尾多写了多余的闭合符号}));，会直接导致代码编译报错
• 跨页面状态丢失问题：你同时给CardActionArea绑定了点击存ID和跳转/ViewProduct的逻辑，跳转后原组件的状态会被销毁，新页面无法读取到之前存储的productId

修复代码示例 #

场景1：当前组件内展示详情不跳转

// 修正初始值类型
const [productId, setProductId] = useState(null);
// 单个商品详情初始值建议设为null而非空数组
const [details, setDetails] = useState(null);

const getProductId = (id) => {
  setProductId(id);
}

// 监听productId变化，有有效值时自动拉取详情
useEffect(() => {
  if (!productId) return;
  const fetchDetails = async () => {
    try {
      const productData = await commerce.products.retrieve(productId);
      setDetails(productData);
    } catch (err) {
      console.error('商品详情拉取失败', err);
    }
  }
  fetchDetails();
}, [productId]);

// 点击事件不需要修改
<CardActionArea component={Link} value={product.id} to="/ViewProduct" onClick={() => getProductId(product.id)}>
  <Product product={product} onAddToCart={onAddToCart} />
</CardActionArea>

场景2：跳转到/ViewProduct页面展示详情

不要将ID存在当前组件的状态中，直接通过路由参数传递ID：

// 修改跳转链接携带商品ID
<CardActionArea component={Link} to={`/ViewProduct/${product.id}`}>
  <Product product={product} onAddToCart={onAddToCart} />
</CardActionArea>

然后在ViewProduct组件内读取路由参数的ID，执行拉取详情的逻辑即可。

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