问题实现-ssr-adsense软件包
我正试图让google与我的应用程序一起工作。我有一个react应用程序，所以我正在尝试实现react 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组件时，我会得到以下错误：
无效钩子呼叫。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
- 您可能有React的不匹配版本和呈现器(例如React )
- ，您可能正在违反Hooks
- 的规则，您可能在同一个应用程序
中有多个React副本。
由于我的代码更改很简单，我假设我的问题要么是1，要么是3。我通过运行npm命令、"npm过时“和"npm”来执行一些分析。这表明我既有过时的软件包，也有两种版本的react。第二个反应版本17.0.2是由于安装了react ssr-adsense.
然后更新所有包，删除节点模块目录，然后运行npm来刷新所有包。然后，我重新运行"npm过时“，并可以看到，我的所有软件包是与”通缉“软件包。在我的package.json文件中，react版本是17.0.2。当我运行"npm“时，我得到了以下信息：
PS C:\Users\jterr\Documents\NodeProjects\TeachLearnGame> npm反应机制
教学游戏@2.0.0 C:\Users\jterr\Documents\NodeProjects\TeachLearnGame
+--未满足的同伴依赖反应-dom@17.0.2
`-react ssr-adsense@1.0.1
-多姆@17.0.2
npm错误！点评缺失:react dom@^16.8.0，由@material ui/图标@4.9.1所需
npm错误！缺少同伴:react dom@^16.3.0，材料所需-自动旋转-旋转木马@3.0.2
npm错误！缺少对等程序:react@^15.0.0连体\ ^16.0.0，react-热加载程序@4.12.20所需
我不知道如何解释这个反应。感谢任何关于我需要做些什么来协调和使组件工作的建议。我需要做什么来解决这些错误和“无效钩子”错误，当我试图呈现Adsense代码时？后一个请求更紧迫。
以下是npm过时命令包的输出，当前需要最新位置@babel/core 7.9.0 7.9.0 7.15.8教学游戏
@babel/预设-env 7.9.0 7.9.0 7.15.8教学游戏
@babel/预设-反应7.9.4 7.9.4 7.14.5教学游戏
@hot/react dom 16.13.0 16.13.0 17.0.1教学游戏
@material ui/图标4.9.1 4.9.1 4.11.2教学游戏
babel-loader 8.1.0 8.1.0 8.2.2教学游戏
速成-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教学游戏
4.17.15 4.17.15 4.17.21教学游戏
猫鼬5.13.11 5.13.11 6.0.11教学游戏
Nodemon2.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教学游戏
react路由器-dom 5.1.2 5.1.2 5.3.0教学游戏
反应-可滑动-查看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开发中间件3.7.3 3.7.3 5.2.1教学游戏
webpack-节点-外场1.7.2 1.7.2 3.0.0教学游戏
回答 1
Stack Overflow用户
发布于 2021-10-23 20:29:20
如前所述，我必须升级到17.0.2版本，以使react ssr-adsense包工作，并确保我只有一个版本的react运行。这些步骤如上文所述。
我能够清除控制台日志中出现的错误(“无效的钩子调用。钩子只能在函数组件的主体内调用。这可能发生在以下原因之一：.”)但是删除Packe-lock.json文件，删除node_modules文件夹，然后重新运行npm安装。在进行这些更改之后，我在本地运行应用程序，并在广告试图呈现的时候出现错误。我已将我的申请移到网上(托管在Heroku)，并要求对其进行审查以获得批准。当adunit试图渲染时，我仍然得到一个错误。错误如下..。
L{ adsbygoogle.push()错误:没有可用宽度=0的插槽大小，名称：'TagError'，pbr: true，堆栈：'TagError: adsbygoogle.push()错误:没有插槽大小f……
我想这是因为我还没有得到谷歌的批准，但希望有人能给我建议，帮助我获得谷歌的批准。
https://stackoverflow.com/questions/69609614
复制相似问题
腾讯云开发者
