如何解决“未捕获的 TagError：adsbygoogle.push() 错误：DOM 中带有 class=adsbygoogle 的所有 ins 元素都已包含广告”。错误

Question

我在我的 React 应用程序上使用 google adsense，我实现了广告单元组件的代码，如下所示：

export const SideAdPlaceholder = () => {
  (window.adsbygoogle = window.adsbygoogle || []).push({});
  return (
    <div
      className="adSides"
    >
      <ins
        className="adsbygoogle"
        style={{ display: "block" }}
        data-ad-client="ca-<adsense account>"
        data-ad-slot="32777475897"
        data-ad-format="auto"
        data-full-width-responsive="true"
      ></ins>
    </div>
  );
};

并添加到index.html<script type="text/plain" data-cookiescript="accepted" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-<adsense account>" crossorigin="anonymous"></script> 文件的正文中。但我收到以下错误

谁能告诉我如何解决这个错误

Answer 1

我相信我已经找到了解决方案，ReactStrict 模式会导致组件渲染两次。因此，在第一次渲染时，它会将广告插入到 ins 标记中，然后在第二次尝试时，它已经满了。

解决方案 - 从中​​删除 React.StrictModeindex.js

代替：

root.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>
);

和：

root.render(
  <App/>
);