0

我正在尝试让 google adsense 与我的应用程序一起使用。我有一个 react SSR 应用程序，所以我正在尝试实现 react-ssr-adsense 包。要实施的代码更改包括安装软件包、使用如下所示的脚本标记更新 ssr 模板的 head 部分，然后添加下面的 Adsense 代码。Adsense 组件已添加到我要呈现广告的页面上主要组件下方的 div 中。

// Coded added to template.js
<head>
<script data-ad-client="ca-pub-999999999999" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>


// Added to each component where I want ads to appear
import AdSense from 'react-ssr-adsense';
   
            <AdSense //FullWidthSquareAd
              client='ca-pub-999999999999'
              slot='xxxxxxxxxx'
              style={{ display: 'block' }}
              format='auto'
              responsive='true'
              layoutKey='-xx-1+yy-zz+vv'
            />

当我运行应用程序并点击 Adsense 组件时，我收到以下错误：

无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生：

  1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
  2. 您可能违反了 Hooks 规则
  3. 你可能在同一个应用程序中拥有多个 React 副本

由于我的代码更改很简单，我假设我的问题是 1 或 3。我通过运行 npm 命令“npm outdated”和“npm ls react-dom”进行了一些分析。这表明我有两个过时的包和两个版本的 react。第二个反应版本 17.0.2 是由于安装了 react-ssr-adsense。

然后我更新了我的所有包，删除了我的节点模块目录，然后运行 ​​npm install 来刷新所有包。然后我重新运行“npm outdated”，可以看到我所有的包都与“Wanted”包内联。在我的 package.json 文件中，反应版本是 17.0.2。当我运行“npm ls react-dom”时，我收到以下消息：

PS C:\Users\jterr\Documents\NodeProjects\TeachLearnGame> npm ls react-dom
tealearngame@2.0.0 C:\Users\jterr\Documents\NodeProjects\TeachLearnGame

+-- 未满足的对等依赖 react-dom@17.0.2

`-- react-ssr-adsense@1.0.1

`-- react-dom@17.0.2

npm 错误！peer dep 缺失：react-dom@^16.8.0，@material-ui/icons@4.9.1 需要

npm 错误！peer dep 缺失：react-dom@^16.3.0，material-auto-rotating-carousel@3.0.2 需要

npm 错误！缺少对等部门：react-dom@^15.0.0 || ^16.0.0，react-hot-loader@4.12.20 需要

我不知道如何解释这个回复。感谢任何关于我需要做些什么来协调和让组件工作的建议。我需要做些什么来解决这些错误以及我在尝试呈现 Adsense 代码时遇到的“Invalid Hooks”错误？后一种要求更为迫切。

这是 npm outdated 命令的输出 Package Current Wanted Latest Location @babel/core 7.9.0 7.9.0 7.15.8teacherlearngame

@babel/preset-env 7.9.0 7.9.0 7.15.8 教学游戏

@babel/preset-react 7.9.4 7.9.4 7.14.5 教学游戏

@hot-loader/react-dom 16.13.0 16.13.0 17.0.1 教学游戏

@material-ui/icons 4.9.1 4.9.1 4.11.2 教学游戏

babel-loader 8.1.0 8.1.0 8.2.2 教学游戏

express-jwt 5.3.1 5.3.1 6.1.0 教学游戏

文件加载器 6.0.0 6.0.0 6.2.0 教学游戏

头盔 3.22.0 3.22.0 4.6.0 教学游戏

lodash 4.17.15 4.17.15 4.17.21 教学游戏

猫鼬 5.13.11 5.13.11 6.0.11 教学游戏

nodemon 2.0.2 2.0.2 2.0.13 教学游戏

反应热加载器 4.12.20 4.12.20 4.13.0 教学游戏

反应可调整大小 1.11.1 1.11.1 3.0.4 教学游戏

反应路由器 5.1.2 5.1.2 5.2.1 教学游戏

反应路由器 dom 5.1.2 5.1.2 5.3.0 教学游戏

react-swipeable-views 0.13.9 0.13.9 0.14.0 教学游戏

webpack 4.46.0 4.46.0 5.58.2 教学游戏

webpack-cli 3.3.11 3.3.11 4.9.0 教学游戏

webpack-dev-middleware 3.7.3 3.7.3 5.2.1 教学游戏

webpack-node-externals 1.7.2 1.7.2 3.0.0 教学游戏

4

1 回答 1

0

如前所述，我必须将 react 升级到版本 17.0.2 才能使 react-ssr-adsense 包工作并确保我只有一个版本的 react 运行。这些步骤如上所述。

我能够清除控制台日志中出现的错误（“无效的挂钩调用。挂钩只能在函数组件的主体内部调用。这可能由于以下原因之一发生：...”）但是删除 package-lock.json 文件，删除 node_modules 文件夹，然后重新运行 npm install。进行这些更改后，我在本地运行应用程序，并且每当广告尝试呈现时都会出现错误。我已将我的应用程序移至网络（托管在 Heroku），并要求对其进行审核以供批准。当 adunits 尝试渲染时，我仍然收到错误。错误如下...

L {message: 'adsbygoogle.push() error: No slot size for availableWidth=0', name: 'TagError', pbr: true, stack: 'TagError: adsbygoogle.push() error: No slot size f...esyndication。 com/pagead/js/adsbygoogle.js:78:107)'}

我认为这是因为我尚未获得谷歌的批准，但如果有人能提供任何建议以帮助获得谷歌的批准，我将不胜感激。

于 2021-10-23T20:29:20.607 回答