Reactjs 等待在nextjs页面中加载paypal脚本_Reactjs_Paypal_Next.js

Reactjs 等待在nextjs页面中加载paypal脚本

reactjs paypal next.js

Reactjs 等待在nextjs页面中加载paypal脚本,reactjs,paypal,next.js,Reactjs,Paypal,Next.js,我有这个代码，应该是渲染贝宝按钮 <Head> <script src="https://www.paypal.com/sdk/js?client-id=KEY"></script> </Head> 我在componentDidMount方法中加载paypal按钮 componentDidMount() { paypal .Buttons({ createOrder: (data, actions)=&

我有这个代码，应该是渲染贝宝按钮

    <Head>
      <script src="https://www.paypal.com/sdk/js?client-id=KEY"></script>
    </Head>

我在componentDidMount方法中加载paypal按钮

componentDidMount() {
    paypal
.Buttons({
  createOrder: (data, actions)=> {
    return actions.order.create({
      purchase_units: [{
          amount: {
            currency_code: "USD",
            value: amount,
          },
        }],
    });
  },
  onCancel: function(data){
    //console.log(data)

  },
  onError: function(err){
    console.log(err)
  }
})
.render("#paypal");
 }




<div id="paypal" className=""></div>

componentDidMount（）{
贝宝
.按钮({
createOrder：（数据、操作）=>{
return actions.order.create({
购买单位：[{
金额：{
货币代码：“美元”，
价值：金额，
},
}],
});
},
onCancel：函数（数据）{
//console.log（数据）
},
onError：函数（err）{
console.log（错误）
}
})
.render（“贝宝”）；
}

在第一个页面加载时，页面抛出一个错误，paypal没有定义，我猜是因为调用componentDidMount方法时脚本没有完全加载。如何等待脚本加载后才能正确呈现按钮

const addPayPalScript = () => {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `https://www.paypal.com/sdk/js?client-id=${process.env.PAYPAL_CLIENT_ID}`;
    // script.setAttribute("data-namespace", "paypal_sdk");

    script.async = true;
    script.onload = () => {
      setSdkReady(true);
    };
    document.body.appendChild(script);
  };

script.onload将标记它已准备就绪。在useState中跟踪它

   const [sdkReady, setSdkReady] = useState(false);

然后在useEffect或componentDidMount内部调用addPayPalScript。我使用useffect

useEffect(() => {
dispatch(orderDetailRequestStart(paramsId));

  if (!window.paypal) {
    addPayPalScript();
  } else {
    // flags that it is ready
    setSdkReady(true);
  }

}, []);

你可以尝试使用这种方法。如果需要，我可以详细说明。