無法在反應應用程序中將 object 轉換為原始值錯誤？

Question

我正在開發一個簡單的 react-spring boot 應用程序，但是由於 GitHub 問題，我使用 IntelliJ 重新創建了我的應用程序啟動文件，並使用以前的應用程序的 package.Z466DEEC76ECDF5FCA6D38571FZ324 依賴項文件數據安裝了節點模塊

如果我使用折疊導航欄（漢堡欄->在移動視圖中折疊的響應式導航欄）並單擊漢堡按鈕查看導航鏈接，則會出現以下錯誤。 但在之前的應用程序中，所有這些事情都進展順利。

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.```

Answer 1

首先，刪除 jQuery：

npm remove jquery

然后重新安裝它：

npm install jquery@~3.4.1

Answer 2

我在開發的 Rails 6 項目中遇到了同樣的問題。 我正在使用 bootstrap 4.4.1 並且我的折疊導航欄存在完全相同的問題：導航欄折疊但折疊時出現的漢堡包按鈕不可點擊。

解決方案：將 jquery 從 3.5.0 降級到 3.4.1。 我暫時沒有調查錯誤的實際原因。

要添加更多詳細信息，jquery 版本應在package.json依賴項中更新，並且不要忘記運行yarn install --check-files在您完成此更改后應用更改。

Answer 3

這與jQuery 3.5.0. 這是一個影響許多插件的重大更改。 暫時恢復到以前版本的jQuery (like 3.4.1)為我解決了這個問題。

或者

在項目node_modules中找到您的 Jquery package ，將其刪除並使用此命令重新安裝

npm install jquery@~3.4.1

資料來源： jQuery 第 4665 期

Answer 4

我用yarn remove jquery ，然后安裝了yarn add jquery@3.4.1來降級。

問題是在 yarn.lock 文件中仍然找到 3.5.0，因此錯誤仍然存在。

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

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

最后錯誤消失了。

Answer 5

就像許多其他人所說的那樣，感謝jquery 3.5.0 ，我遇到了同樣的問題。

看來這現在已通過3.5.1修復

Answer 6

打開package.json並更換

"jquery": "^3.4.1",

和

"jquery": "3.4.1"

資源

Answer 7

我已經使用了 jquery 3.41，但是在將我的項目文件移動到另一個項目后出現了問題，所以在使用 jquery 3.41 的情況下，仍然嘗試通過運行以下命令來查看，

1)npm 刪除 jquery

2)npm install jquery@~3.4.1

這些命令解決了我的問題。

Answer 8

從node_modules文件夾中刪除 Jquery package。

然后使用此命令重新安裝它。

npm install jquery@3.5.0

Answer 9

您可以將 go 返回 jquery v3.4.1 或最近他們發布了 v3.5.1。 這個版本運行良好。 這是 npm package。