reactjs nextjs中的“错误：zoid破坏了所有组件↵”错误答案

【问题标题】："Error: zoid destroyed all components↵" error in reactjs nextjsreactjs nextjs中的“错误：zoid破坏了所有组件↵”错误
【发布时间】：2020-08-29 21:38:29
【问题描述】：

我在我的 nextjs 应用程序中集成了这个 paypal。当我加载页面时，一切都加载良好，但是当我从页面导航并返回时。它抛出一个错误

unhandled_error: zoid destroyed all components↵

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 甚至没有为这个错误提供任何进一步的解释，所以我一直在绞尽脑汁。请为这两个问题投票支持他们之前的排名，以使其更加明显

标签： reactjs paypal next.js

【解决方案1】：

这是 Paypal 嵌入 JavaScript 的问题，创建按钮脚本片段在 paypal 初始化之前运行。我的解决方案是在运行创建按钮脚本之前加载 PayPal 脚本

function loadAsync(url: string, callback: () => void) {
  const s = document.createElement('script');
  s.setAttribute('src', url);
  s.onload = callback;
  document.head.insertBefore(s, document.head.firstElementChild);
}

export const loadScriptPaypal = (html: string) => {
  const regex = /<script\b[^>]*>([\s\S]*?)<\/script>/gm;
  const scripts = html.match(regex);
  let pureHtml = html;
  const src = scripts[0].match(/src="(.*?)"/)[1];
  const func = scripts[1].replace(/<\/script>|<script>/g, '');
  loadAsync(src, () => {
    eval(func);
  });
  scripts.forEach(script => {
    pureHtml = pureHtml.replace(script, '');
  });
  return pureHtml;
};

【讨论】：

【解决方案2】：

这是因为您以错误的方式实现它。 PayPal 有一个 separate page，其中包含单页应用程序的文档。

编辑：确保在 Next.js 应用程序中导入 React 和 ReactDOM。正如您在他们的 React 示例中所见。

【讨论】：

我认为没有人错误地实施它。这段文档是最近才添加的。这应该可以解决问题
你是对的。执行似乎是正确的。只是缺少一些东西。
@Dutch，您知道需要添加哪些内容才能充分发挥作用吗？

【解决方案3】：

这与 Paypal 按钮“Zoid”依赖项中当前的 open issue 有关，与它处理 React 组件的方式中的错误有关。

目前，有一个open PR 尚未完成/批准，但正在解决此问题。在这解决之后，接下来 Paypal 团队将负责升级此依赖项以最终修复该错误。

免责声明：我是创建问题并提交 PR 的人，我将在合并后更新此评论。

【讨论】：