如何在 getstaticprops 函数中从 Context API 获取数据？

Question

我正在为我的静态电子商务 Next.js 应用程序制作支付功能。

对于付款，我有几个阶段：

使用运输信息表单和重定向到 /payment 页面的“支付”按钮制作购物车页面；
在 /payment 页面上，我连接了我的支付服务，需要从 Context API 获取购物车信息，但我无法在 getStaticProps 中使用 Context API这是我的问题。支付页面只需要获取购物车数据并重定向到外部服务支付表单。

页面 /payment 的代码如下：

import { useEffect, useContext } from "react"
import QiwiBillPaymentsAPI from "@qiwi/bill-payments-node-js-sdk"

import { CartContext } from "@/context/GlobalState"

export default function Payment ({ payUrl }) {
    useEffect(() => window.location.assign(payUrl))
    return (
        <span>Redirect</span>
    )
}


export async function getStaticProps() {
    const qiwiApi = new QiwiBillPaymentsAPI(process.env.QIWI_SECRET_KEY)

    const { state, dispatch } = useContext(CartContext)
    const { cart } = state

    const billId = qiwiApi.generateId()
    const lifetime = qiwiApi.getLifetimeByDay(1);
    const fields = {
        amount: 1.00,
        currency: "RUB",
        expirationDateTime: lifetime,
    }

    const payment_data = await qiwiApi.createBill( billId, fields )
    const payUrl = payment_data.payUrl

    return { props: { payUrl }}
}

请帮我出出主意。

Answer 1

可能的解决方案！

我已经使用我的 getStaticProps 函数中的代码进行了 API 路由（它获取总价并查询支付服务，然后 return 支付 url）。 api 路由代码如下：

import QiwiBillPaymentsAPI from "@qiwi/bill-payments-node-js-sdk"

export default async function handler(req, res) {
    const { 
        query: { total },
    } = req

    const qiwiApi = new QiwiBillPaymentsAPI(process.env.QIWI_SECRET_KEY)
    const billId = qiwiApi.generateId()
    const lifetime = qiwiApi.getLifetimeByDay(1);
    const fields = {
        amount: total,
        currency: "RUB",
        expirationDateTime: lifetime,
    }

    const payment_data = await qiwiApi.createBill( billId, fields )
    const payUrl = payment_data.payUrl

    res.json({ url: payUrl })
}

然后 /payment 页面代码（查询我的 API 路线并获得付款 url，然后重定向到付款表单）：

export default function Payment () {
    const { state, dispatch } = useContext(CartContext)
    const { cart } = state

    const fetcher = (...args) => fetch(...args).then(res => res.json())

    const { data, error } = useSWR(`/api/qiwi-pay?total=${cart.total}`, fetcher)

    if (error) return <div>failed to load</div>
    if (!data) return <div>loading...</div>

    window.location.assign(data.url)

    return (
        <>
            <span>Redirect to payment form.</span>
        </>
    )
}

这种方法非常有效！

如何在 getstaticprops 函数中从 Context API 获取数据？

How to get data from Context API in getstaticprops function?

reactjs

next.js

react-context