Fetch 返回 undefined - Express 和 React

Question

我正在关注条带教程（来自条带） - 但是在发布请求时从我的服务器返回一个未定义的值。你能帮我弄清楚我在哪里搞砸了吗？

首先，当用户点击支付按钮时，它会触发“joinClass()”函数。

    const joinClass = async (youtubeId) => {

    const { data: clientSecret } = await fetch('/payment_intents', {
        method: 'POST',
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({amount: costPerClass * 100})
    })

    console.log(clientSecret)
    //Returns Undefined

}

这是服务器上的路由 - 它可以工作，但不会发送回 client_secret。

app.post('/payment_intents', async (req, res) => {
try {
    const { amount } = req.body
    const paymentIntent = await stripe.paymentIntents.create({
        amount, 
        currency: "usd"
    })

    console.log(paymentIntent.client_secret)
    //Logs to key correctly.

    res.status(200).send(paymentIntent.client_secret);

} catch (error) {
    res.status(500).json({statusCode: 500, message: 'error'})
}

})

我是否在服务器的回调函数中错误地使用了 async/await？我尝试了几种不同的方法，但它仍然返回未定义。

我解构了函数的名称 (const { data: clientSecret } =.... 就像他们在视频中所做的那样。也许这就是问题所在？

*刚刚尝试了以下 - 没有成功

const joinClass = async (youtubeId) => {

    const data = await fetch('/payment_intents', {
        method: 'POST',
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({amount: costPerClass * 100})
    })
    console.log(data)
    //Returns Response 200
    const dataResponse = await data.json()
    console.log(dataResponse)
    //Uncaught in promise

}

Answer 1

后端在/payment_intents响应中发回了一个简单的文本字符串，所以在前端接收数据时你会想要使用response.text()方法（而不是response.json()）：

https://developer.mozilla.org/en-US/docs/Web/API/Body/text

例如：

const response = await fetch("/payment_intents", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ amount: costPerClass * 100 }),
});

const clientSecret = await response.text();

演示本身使用 axios 而不是 fetch，它有一点不同的 API：https://github.com/axios/axios