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

Posted 2023-03-30

【中文标题】如何从 getstaticprops 函数中的 Context API 获取数据？

【英文标题】：How to get data from Context API in getstaticprops function?

【发布时间】：2021-06-11 11:07:04

【问题描述】：

我正在为我的静态电子商务 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 

请帮我出出主意。

【问题讨论】：

getStaticProps 在构建时在服务器上运行。您将无法访问其中的任何运行时或客户端逻辑。另外，如果您似乎没有使用getStaticProps 中的购物车数据，为什么还需要访问上下文？你不能在你的Payment 组件中处理上下文吗？

我从您的代码中注意到一件事，您使用的是window.location.assign，在这种情况下这可能是一个好主意。但我担心你对所有事情都使用相同的东西。确保您使用next router。否则，您将完全退出 SPA 并使用 Next.js

@云海 感谢您的关注！是的，我只在这种情况下使用window.location.assign。我一直在寻找使用next router 的方法，但我做不到。如果你知道，请告诉我！

@juliomalves 我需要在 getStaticProps 中有上下文 api 访问权限，以便在字段对象中更改 amount（未来付款的总价）等等。出于某种原因，我无法在 Payment 组件中使用 qiwiApi，我在 useEffect 或只是在函数中尝试了它，但在不起作用并返回错误并返回 'fs'。

我建议您将 getStaticProps 代码移动到 API 路由，然后从您的 Payment 组件向该 API 路由发出请求，使用上下文中您需要的任何内容。

【参考方案1】：

可能的解决方案！

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

这种方法效果很好！