知道为什么会发生此错误吗？ "Error: usePayPalScriptReducer must be used within a PayPalScriptProvider"

Question

我正在尝试设置PayPal结账。。。在开发环境中，它是有效的，但当我试图将代码部署到vercel时，我不断收到以下错误：

Error: usePayPalScriptReducer must be used within a PayPalScriptProvider

知道为什么吗？我使用服务器端道具和服务器端路径，这有什么关系吗？

Vercel还制作了一份日志，说明它可能与https://nextjs.org/docs/messages/prerender-error

这是我的PayPal组件：

import { PayPalScriptProvider, PayPalButtons } from '@paypal/react-paypal-js'
import {
getAllBootcampsSlugs,
getBootcampDataBySlug,
} from './../../../src/utils/bootcampsApi'
function Join() {
function createOrder(data, actions) {
return actions.order
.create({
purchase_units: [
{
amount: {
value: 5,
},
},
],
application_context: {
shipping_preference: 'NO_SHIPPING',
},
})
.then((orderID) => {
return orderID
})
}
// handles when a payment is confirmed for paypal
async function onApprove(data, actions) {
// Code
}
// handles payment errors
function onError(data, actions) {
// Code
}
return (
<div className="min-h-screen flex flex-col justify-center items-center">
<PayPalScriptProvider
options={{
'client-id': process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID,
}}>
<PayPalButtons
style={{
color: 'black',
label: 'pay',
tagline: false,
// layout: 'horizontal',
}}
createOrder={createOrder}
onApprove={onApprove}
onError={onError}
/>
</PayPalScriptProvider>
</div>
)
}
export default Join
// Return the page without additional layout.
Join.getLayout = (page) => page
export async function getStaticPaths() {
const paths = getAllBootcampsSlugs().map((bootcamp) => ({
params: {
bootcamp,
},
}))
return {
paths,
fallback: false,
}
}
export async function getStaticProps(context) {
// Fetch Data
const { params } = context
const data = getBootcampDataBySlug(params.bootcamp)
return {
props: {
data: data,
},
}
}

非常感谢帮助者！

Answer 1

您需要在PayPalScriptProvider组件中使用usePayPalScriptReducer，如下所示：

import {
PayPalScriptProvider,
PayPalButtons,
usePayPalScriptReducer
} from "@paypal/react-paypal-js";
const ButtonWrapper = () => {
// usePayPalScriptReducer can be use only inside children of PayPalScriptProviders
// This is the main reason to wrap the PayPalButtons in a new component
const [{ options, isPending }, dispatch] = usePayPalScriptReducer();
return (
<PayPalButtons ... />
)
}
const ProviderWrapper = () => {
return (
<PayPalScriptProvider ...>
<ButtonWrapper />
</PayPalScriptProvider>
)
}
export default ProviderWrapper;

有关更多信息，请查看文档：https://paypal.github.io/react-paypal-js/?path=/docs/example-paypalbuttons--默认