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

【问题标题】：How to get data from Context API in getstaticprops function?如何从 getstaticprops 函数中的 Context API 获取数据？
【发布时间】：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 路由发出请求，使用上下文中您需要的任何内容。

标签： reactjs next.js react-context

【解决方案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>
        </>
    )
}

这种方法效果很好！

【讨论】：