亚马逊克隆项目Payment页useNavigate跳转订单页异常排查

跳转异常的核心原因是表单提交事件名拼写错误，自定义提交逻辑完全未触发，最终执行了原生表单的默认提交行为：

• React 表单标准提交事件属性为onSubmit，你的代码中将其错写为onSumbit（submit拼写错误，b和m顺序颠倒为sumbit），对应的事件处理函数也同样错命名为handleSumbit。
• 由于事件绑定失效，点击「Buy Now」按钮时，你写在处理函数内的event.preventDefault()、Stripe支付确认、navigate('/orders')逻辑全部不会执行。
• 原生HTML表单未配置action属性时，默认提交行为是向当前页面路径发起GET请求，表单内容会拼接为URL查询参数；由于表单内没有可提交的常规字段，最终就跳转到了带空查询串的/payments?路径，和你遇到的现象完全吻合。

只需要修正两处拼写错误即可：

1. 修正事件处理函数名

// 修正前
const handleSumbit = async (event) => {
    event.preventDefault();
    setProcessing(true);
    const payload = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: elements.getElement(CardElement)
        }
    }).then(({ paymentIntent }) => {
        setSucceeded(true);
        setError(null)
        setProcessing(false)
        navigate('/orders', { replace: true })
    })
}

// 修正后（仅改函数名，内部逻辑不变）
const handleSubmit = async (event) => {
    event.preventDefault();
    setProcessing(true);
    const payload = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: elements.getElement(CardElement)
        }
    }).then(({ paymentIntent }) => {
        setSucceeded(true);
        setError(null)
        setProcessing(false)
        navigate('/orders', { replace: true })
    })
    // 建议补充错误捕获，避免支付失败时页面永久卡在processing状态
    .catch(err => {
        setProcessing(false);
        setError(err.message);
    })
}

2. 修正表单标签上的事件绑定属性名

{/* 修正前 */}
<form onSumbit={handleSumbit}>

{/* 修正后 */}
<form onSubmit={handleSubmit}>

修改完成后点击支付按钮，就会正常执行你的自定义逻辑，支付成功后跳转至/orders页面。

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