无法在react应用程序中将对象转换为原始值错误?

IT技术 javascript jquery reactjs bootstrap-4
2021-04-03 19:11:23

我正在开发一个简单的 react-spring 启动应用程序,但由于 GitHub 问题,我使用 IntelliJ 重新创建了我的应用程序启动文件,并使用先前应用程序的 package.json 文件的依赖项数据安装了节点module。

如果我使用折叠导航栏(汉堡栏 -> 在移动视图中折叠的响应式导航栏)并单击汉堡按钮查看导航链接,则会出现以下错误。但是所有这些事情在之前的申请中都很顺利。

TypeError: Cannot convert object to primitive value
HTMLDivElement.<anonymous>
C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:346
  343 |   ...typeof config === 'object' && config ? config : {}
  344 | }
  345 | 
> 346 | if (!data && _config.toggle && /show|hide/.test(config)) {
      | ^  347 |   _config.toggle = false
  348 | }
  349 | 
View compiled
Function.each
C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/webapp/front-end/node_modules/jquery/dist/jquery.js:381
  378 | if ( isArrayLike( obj ) ) {
  379 |     length = obj.length;
  380 |     for ( ; i < length; i++ ) {
> 381 |         if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
      | ^  382 |            break;
  383 |         }
  384 |     }
View compiled
jQuery.fn.init.each
C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/webapp/front-end/node_modules/jquery/dist/jquery.js:203
  200 | 
  201 | // Execute a callback for every element in the matched set.
  202 | each: function( callback ) {
> 203 |     return jQuery.each( this, callback );
      | ^  204 | },
  205 | 
  206 | map: function( callback ) {
View compiled
jQuery.fn.init._jQueryInterface [as collapse]
C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:337
  334 | }
  335 | 
  336 | static _jQueryInterface(config) {
> 337 |   return this.each(function () {
      | ^  338 |     const $this   = $(this)
  339 |     let data      = $this.data(DATA_KEY)
  340 |     const _config = {
View compiled
HTMLDivElement.<anonymous>
C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:385
  382 |     const $target = $(this)
  383 |     const data    = $target.data(DATA_KEY)
  384 |     const config  = data ? 'toggle' : $trigger.data()
> 385 |     Collapse._jQueryInterface.call($target, config)
  386 |   })
  387 | })
  388 | 
View compiled
Function.each
C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/webapp/front-end/node_modules/jquery/dist/jquery.js:381
  378 | if ( isArrayLike( obj ) ) {
  379 |     length = obj.length;
  380 |     for ( ; i < length; i++ ) {
> 381 |         if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
      | ^  382 |            break;
  383 |         }
  384 |     }
View compiled
jQuery.fn.init.each
C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/webapp/front-end/node_modules/jquery/dist/jquery.js:203
  200 | 
  201 | // Execute a callback for every element in the matched set.
  202 | each: function( callback ) {
> 203 |     return jQuery.each( this, callback );
      | ^  204 | },
  205 | 
  206 | map: function( callback ) {
View compiled
HTMLButtonElement.<anonymous>
C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:381
  378 | const selector = Util.getSelectorFromElement(this)
  379 | const selectors = [].slice.call(document.querySelectorAll(selector))
  380 | 
> 381 | $(selectors).each(function () {
      | ^  382 |   const $target = $(this)
  383 |   const data    = $target.data(DATA_KEY)
  384 |   const config  = data ? 'toggle' : $trigger.data()
View compiled
HTMLDocument.dispatch
C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/webapp/front-end/node_modules/jquery/dist/jquery.js:5428
  5425 | event.handleObj = handleObj;
  5426 | event.data = handleObj.data;
  5427 | 
> 5428 | ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||
       | ^  5429 |  handleObj.handler ).apply( matched.elem, args );
  5430 | 
  5431 | if ( ret !== undefined ) {
View compiled
HTMLDocument.elemData.handle
C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/webapp/front-end/node_modules/jquery/dist/jquery.js:5232
  5229 | 
  5230 |        // Discard the second event of a jQuery.event.trigger() and
  5231 |        // when an event is called after a page has unloaded
> 5232 |        return typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ?
       | ^  5233 |          jQuery.event.dispatch.apply( elem, arguments ) : undefined;
  5234 |    };
  5235 | }
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.```
6个回答

首先,删除 jQuery:

npm remove jquery

然后重新安装它:

npm install jquery@~3.4.1
提及:它现在已在 jquery 3.5.1 中npm update修复,因此应该修复它
2021-05-30 19:11:23
这为我修好了。我花了整整一个小时想知道发生了什么。:( 非常感谢你!
2021-06-07 19:11:23
3.4.1 存在 XSS 漏洞:github.com/advisories/GHSA-gxr4-xjj5-5px2请改用 3.5.1。
2021-06-12 19:11:23
已投票,但我想补充一点,这是重新启动/重建所需的。要么npm run dev重启,再重启npm run watch
2021-06-18 19:11:23
谢谢,这和我最后解决这个问题是一样的。
2021-06-19 19:11:23

我在开发的 rails 6 项目中遇到了同样的问题。我正在使用 bootstrap 4.4.1 并且我的折叠导航栏有完全相同的问题:导航栏折叠但折叠时出现的汉堡按钮不可点击。

解决办法:将jquery从3.5.0降级到3.4.1。我暂时没有调查错误的实际原因。

要添加更多详细信息,应在package.json依赖项中更新 jquery 版本,并且yarn install --check-files在执行此操作后不要忘记运行以应用更改。

我正在使用 2 个版本的 jQuery,忽略上面的内容,一切都很好!
2021-05-25 19:11:23
FWIW 这对我也不起作用。我使用的 WordPress 使用了一些旧的 1.x 版本,我换了 3.4.1 并且仍然看到这个问题。我认为这与一些相当新的东西有关,因为过去一小时内有非常相似的帖子(参见stackoverflow.com/questions/61177140/...
2021-06-02 19:11:23
我目前正在使用 jquery 3.4.1
2021-06-07 19:11:23
在项目 node_modules 中找到您的 Jquery 包,将其删除并使用此命令重新安装,npm install jquery@~4.3.1
2021-06-09 19:11:23

这与jQuery 3.5.0.影响许多插件的重大更改有关。暂时恢复到以前的版本jQuery (like 3.4.1)为我解决了这个问题。

或者

在项目中找到您的 Jquery 包node_modules,删除它并使用此命令重新安装它

npm install jquery@~3.4.1

来源:jQuery 问题 #4665

就像许多其他人所说的那样,我遇到了同样的问题,感谢jquery 3.5.0.

看来这现在已经解决了 3.5.1

我用 删除了 jQuery yarn remove jquery,然后安装yarn add jquery@3.4.1以降级。

问题是在yarn.lock文件中仍然找到3.5.0,因此错误仍然存​​在。

我必须在 package.json"dependencies"部分之外添加

"resolutions": { "jquery": "3.4.1" },

最后错误消失了。

哦,非常感谢。这也是我的问题,我的 package-lock.json 文件中有 3.5.0。在过去的一个小时里,我一直在绞尽脑汁,试图弄清楚为什么我仍然收到那个错误。
2021-05-27 19:11:23