如何在 getstaticprops 函数 Next.JS 中从 Context API 获取数据

如何解决如何在 getstaticprops 函数 Next.JS 中从 Context API 获取数据

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

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

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

页面/付款代码如下：

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 }}
}

请帮助我任何想法。提前致谢！

我使用 getStaticProps 函数中的代码创建了 API 路由（它获取总价并查询支付服务，然后返回支付 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,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>
        </>
    )
}

这是好的解决方案吗？/payment 页面代码是否正确？

解决方法

可能的解决方案！

我使用 getStaticProps 函数中的代码创建了 API 路由（它获取总价并查询支付服务，然后返回支付 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>
        </>
    )
}

这种方法效果很好！