Javascript 为什么我不能在React前端使用try/catch将费用发送到Stripe和我的Strapi.js后端？

我正试图向stripe收取费用。我在Strapi.js后端设置了费用，并且正在创建新订单。我在react前端创建了一个函数，用于在strapi中为我的“orders”内容类型创建一个条目，但该函数的try/catch似乎没有任何功能，甚至没有记录错误

我曾尝试在这里或那里更改一些变量，但老实说，我有点不知所措，因为这是我第一次使用这些技术，我是一个初学者。我在看一段视频，从中了解一些事情，但这正是我面临的问题。我还在index.html文件中引入了脚本标记。我正在使用strapi sdk

以下是strapi后端上的create Orders函数的外观（使用密钥将条带引入页面顶部）：

这是我在react frontend checkout.js文件中的提交函数

 handleOrder = async () => {
        const { checkOutItems, city, address } = this.state;
        let token;
        const amount = calculateTotalAmount(checkOutItems);
        // console.log('working')
        try {
            // create token
            const response = await this.props.stripe.createToken();
            token = response.token.id;
            await strapi.createEntry('order', {
                address,
                city,
                products: checkOutItems,
                amount,
                token
            });

        } catch (error) {
            console.log(error)
        }
    }

我希望当我填写表单以及页面上的stripe card元素的'4242'链时，费用将被发送，我可以转到我的stripe dashboard查看费用，也可以转到我的strapi admin dashboard，转到orders，查看创建的新订单

---

到目前为止，这些都没有发生。我填写信息，单击提交，表单重置，然后什么也没有。没有记录错误，没有控制台。try-catch中的日志将起作用。

您可能需要通过在单击处理程序中的事件上调用

preventDefault（）

来阻止表单的默认提交功能。@taintedzodiac您是最好的！您可能需要通过在单击处理程序中对事件调用

preventDefault（）

来阻止表单的默认提交功能。@taintedzodiac您是最好的！

 handleOrder = async () => {
        const { checkOutItems, city, address } = this.state;
        let token;
        const amount = calculateTotalAmount(checkOutItems);
        // console.log('working')
        try {
            // create token
            const response = await this.props.stripe.createToken();
            token = response.token.id;
            await strapi.createEntry('order', {
                address,
                city,
                products: checkOutItems,
                amount,
                token
            });

        } catch (error) {
            console.log(error)
        }
    }