Javascript 在React.js中集成PayPal时发生iframe渲染错误

我有一个应用程序创建与创建反应应用程序，我需要实施贝宝作为一种支付方式

我创建了组件PayPalBtn，如下所示：

从“React”导入React
导出默认函数PayPalBtn（）{
const[paid，setPaid]=React.useState（false）；
const[error，setError]=React.useState（null）；
const paypalRef=React.useRef（）；
React.useffect（（）=>{
window.paypal.Buttons({
createOrder：（数据、操作）=>{
return actions.order.create({
意图：“捕获”，
购买单位：[{
description:“description”，
金额：{
货币代码：“美元”，
数值：500.0，
},
},],
});
},
onApprove:async（数据、操作）=>{
const order=wait actions.order.capture（）；
setPaid（真）；
控制台日志（订单）；
},
onError：（err）=>{
//设置错误（err），
控制台错误（err）；
},
}).render（paypalRef.current）；
}, []);
//如果已经付款
如果（已支付）{
控制台日志（“成功”）；
}
//如果发生任何错误
如果（错误）{
控制台日志（“错误”）；
}
返回(
)
}

我从另一个文件（Pay.js）调用该组件：

从“/PayPalBtn”导入PayPalBtn；
类扩展组件{
render（）{
返回(
//其他代码。。
// ...
)
}
}

我以前包括

将my sandbox clientid用作公用文件夹index.html文件头中的客户端

我包括以下npm模块：

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "crypto-js": "^4.0.0",
    "firebase": "^7.19.0",
    "paypal-rest-sdk": "^1.8.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3"
 }

在localhost、browser中测试站点时出现以下错误：

unhandled_error {err: "Error: Expected element to be passed to render ifr…://localhost:3000/static/js/1.chunk.js:149958:31)", timestamp: "1598351976152", referer: "localhost:3000", uid: "fdd8bf1947_mta6mjc6ndk", env: "sandbox"}env: "sandbox"err: "Error: Expected element to be passed to render iframe

其次是：

Uncaught Error: Expected element to be passed to render iframe
    at js?client-id=CLIENT:2
    at js?client-id=CLIENT:2
    at n.e.dispatch (js?client-id=CLIENT:2)
    at n.e.then (js?client-id= CLIENT:2)
    at p (js?client-id=CLIENT:2)
    at Object.render (js?client-id=CLIENT:2)
    at PayPalBtn.js:11
    at commitHookEffectListMount (react-dom.development.js:19731)
    at commitPassiveHookEffects (react-dom.development.js:19769)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at flushPassiveEffectsImpl (react-dom.development.js:22853)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushPassiveEffects (react-dom.development.js:22820)
    at react-dom.development.js:22699
    at workLoop (scheduler.development.js:597)
    at flushWork (scheduler.development.js:552)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:164)

因此，浏览器不会显示该按钮

---

有人能告诉我哪里错了，我该怎么做才能解决这个问题吗？

PayPal.buttons的
render
方法需要一个DOM元素。您创建了一个引用，但没有指向任何元素。修改
PayPalBtn.js
，如下所示：

export default function PayPalBtn() {

   
    const paypalRef = React.useRef();
    // other code for component
    // A valid element in which PayPal SDK renders the buttons in.
    return <div ref={ paypalRef }></div>;
}

导出默认函数PayPalBtn（）{
const paypalRef=React.useRef（）；
//组件的其他代码
//PayPal SDK在其中呈现按钮的有效元素。
返回；
}