为什么 .map() 第一次正确注销数组，第二次说'undefined'？

Question

`

export default async function handler(req, res) {
if (req.method === 'POST') {
try {
const bodyItems = req.body.items;
console.log(bodyItems)

const renderCartItems = bodyItems?.map( singleProduct => {
return {
price_data: {
currency: 'usd',
product_data: {
name: singleProduct.name
},
unit_amount: singleProduct.price
},
quantity: singleProduct.qty,
}
})
console.log(renderCartItems, "mapped")

// Create Checkout Sessions from body params.
const session = await stripe.checkout.sessions.create({
line_items: renderCartItems,

mode: 'payment',
success_url: `http://localhost:3000/done`,
cancel_url: `http://localhost:3000`,
});
console.log(session.url)
res.redirect(303, session.url); 
} catch (err) {
res.status(err.statusCode || 500).json(err.message);
}
} else {
res.setHeader('Allow', 'POST');
res.status(405).end('Method Not Allowed');
}
}

`

这是错误

"The `line_items` parameter is required in payment mode."

这就是从我的消费中得到安慰的。log统计

[
{
name: 'sped',
qty: 1,
price: 5000,
img: { _type: 'image', asset: [Object] },
ogprice: 5000
}
]
[
{
price_data: { currency: 'usd', product_data: [Object], unit_amount: 5000 },
quantity: 1
}
] mapped
undefined
undefined mapped

有人知道如何解决这个问题吗？它在第一次运行时似乎得到了正确的数据，但在第二次运行时返回未定义的数据。我尝试使用严格反应模式，但它仍然运行两次

Answer 1

退一步看，您共享的日志输出显示您的handler运行了两次，一次是按预期使用req.body.items，另一次是未定义的。

我建议在handler开始时添加日志记录，以了解这个额外的请求是什么，并检查浏览器网络日志，查看端点是否在客户端代码中被调用了两次。你可能会发现这是一个React错误，当你不打算用不稳定的数据调用API时