reactjs 轴错误500 data.map不是函数

shyt4zoc  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(73)

这是我问的另一个问题的延伸,到目前为止还没有答案。我正在做一个测试电子商务商店来学习next js,我正在尝试实现stripe checkout作为我的支付处理器。我得到了一个.map不是函数错误。在我之前的问题中,我试图通过post方法发布到api来实现它,这次我尝试axis.post这是我最后一篇关于如何在nextjs中使用JSON数据的文章
下面是我从www.example.com的console.log中得到的响应axis.post:

{
  body: [
    {
      id: 3,
      title: 'Mens Cotton Jacket',
      price: 55.99,
      description: 'great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.',
      category: "men's clothing",
      image: 'https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg'
    }
  ]
}

当我使用.map数组方法时,我得到了错误。map不是一个函数。如果不是.map函数,我如何使用这些数据?这篇文章建议.map应该正常工作,但我显然做错了什么。How to use JSON data。我尝试过JSON.parse,但也给了我一个错误。
下面是我如何张贴到API:

const postData = async () => {  
      const response = await axios.post("/api/checkout_sessions", {
        // method: "POST",
        body: basket,
      })
      return response.json();
    };

basket是要发送到API的对象数组。
下面是我如何使用正在发布的数据。我尝试做的是使用.map函数中的数据创建一个新的数组,该数组的格式正确,适合Stripe API。我在.map处停了下来,我不确定从这里到哪里去,因为我已经阅读了我认为是nextjs、stripe和axios文档的所有必要部分。

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {

  if (req.method === 'POST') {

    const data = req.body

      console.log(data)
      
    const transformedItems = data.map(items => ({  
      price_data: { 
      unit_amount: items.price,
      currency: 'usd',
      product_data: {  
        name: items.title,
        description: items.description,
      },
    },
    quantity: 1,
  }))

    try {
      // Create Checkout Sessions from body params.
      const session = await stripe.checkout.sessions.create({
        shipping_address_collection: {
          allowed_countries: ["US", "CA", "GB"],
        },
       line_items: transformedItems,

        mode: 'payment',
        success_url: `${req.headers.origin}/?success=true`,
        cancel_url: `${req.headers.origin}/?canceled=true`,
      });
      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');
  }
}
nzk0hqpo

nzk0hqpo1#

我认为您忘记了接收basket参数,这就是出现错误的原因。

const postData = async (basket) => {  
     const response = await axios.post("/api/checkout_sessions", {
      // method: "POST",
      body: basket,
      })
     return response.json();
   };

你可以试着用basket参数

相关问题