等待在 nextjs 页面中加载贝宝脚本答案

【问题标题】：wait for loading paypal script in nextjs page等待在 nextjs 页面中加载贝宝脚本
【发布时间】：2020-08-29 21:16:54
【问题描述】：

我有这段代码应该呈现 PayPal 按钮。

    <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>

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

【问题讨论】：

您可以尝试使用这种方法。 stackoverflow.com/a/59041377/706798。如果需要，我可以详细说明。

标签： javascript reactjs paypal next.js

【解决方案1】：

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。我使用 useEffect

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

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

}, []);

【讨论】：