React项目使用commerce.js无法生成CheckoutToken问题排查

问题现象 #

项目集成commerce.js时，Checkout页面的CheckoutToken无法正常生成，控制台无对应token打印，无法确认是语法错误还是路由传参问题。

问题根因 #

一共3处代码错误直接导致该问题：

• 路由传参错误：App.jsx中/checkout路由给Checkout组件传入的属性为checkout={Checkout}，未传递组件依赖的cart数据，Checkout组件内拿到的cart值为undefined
• 错误被静默吞掉：Checkout.jsx中生成token的异步逻辑catch块为空，接口调用报错后没有任何控制台输出，无法定位错误
• 执行时机错误：useEffect依赖数组为空，组件首次挂载时cart还是初始值空对象{}，此时cart.id不存在，调用生成token接口直接报错；后续cart数据异步拉取完成后，useEffect也不会重新执行，无法生成token

修复代码 #

1. 修复App.jsx路由传参 #

找到/checkout对应的Route配置，替换为正确的传参：

<Route path="/checkout" element={<Checkout cart={cart} />}/>

删掉原来错误的checkout={Checkout}传值。

2. 修复Checkout.jsx的useEffect逻辑 #

替换原来的useEffect代码，增加非空判断、错误打印、正确依赖：

useEffect(() => {
    const generateToken = async () => {
        // cart未加载完成时直接返回，不调用接口
        if (!cart?.id) return;
        try {
            const token = await commerce.checkout.generateToken(cart.id, { type: 'cart' });
            console.log(token);
            setCheckoutToken(token);
        } catch (error) {
            // 打印错误，不要静默捕获
            console.error('Token生成失败：', error);
        }
    }
    generateToken();
// 将cart加入依赖数组，cart数据更新后自动重新执行
}, [cart]);

3. 可选优化（修复步骤切换不生效问题） #

当前Stepper组件的activeStep被硬编码为0，后续切换支付步骤时进度条不会更新，将其绑定为已定义的state值：

<Stepper activeStep={activeStep} className={classes.stepper}>

验证逻辑 #

修复后按流程操作：

• 先在商品页添加商品到购物车，确保cart数据正常生成
• 进入结算页，控制台会正常打印生成的checkoutToken
• 如果仍有报错，控制台会直接输出具体错误原因（比如API密钥配置错误、购物车为空、网络请求失败等），根据错误提示调整即可

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