升級對0.13.2原因的響應:“未捕獲的類型錯誤:不能讀取屬性'_currentElement'的空值”

[英]Upgrading React to 0.13.2 causes: “Uncaught TypeError: Cannot read property '_currentElement' of null”


I upgraded my React version from 0.12.2 to 0.13.2 and my React-Router from 0.12.4 to 0.13.2. Doing just those two upgrades and nothing else, I now get the following error when I load my webpage/app:

我將我的反應版本從0.12.2升級到0.13.2,我的反應路由器從0.12.4升級到0.13.2。只做這兩種升級,沒有別的,當我加載我的網頁/應用程序時,我得到如下錯誤:

Uncaught TypeError: Cannot read property '_currentElement' of null

Any ideas what might be causing this? I have seem some references to a potential React-Router bug, but nothing definitive.

有什么想法嗎?我似乎對一個潛在的反應路由器bug有一些參考,但沒有確定的。

The specific line that causes the error is:

導致錯誤的具體行是:

ReactRef.detachRefs(internalInstance, internalInstance._currentElement);

Update 1: I also just upgraded reactify from version 1.0.0 to 1.1.0 and react-router-bootstrap (which I'm not actually using yet) from 0.9.1 to 0.13.0 based on @BinaryMuse's comments - no change.

更新1:我也只是升級了從1.0.0版本到1.1.0的reactify,以及從0.9.1到0.13.0的從0.9.1到0.13.0的reactify,這是基於@BinaryMuse的評論——沒有變化。

Update 2: After further testing, I have narrowed this down to an issue with react-d3. Disabling the react-d3 code from my site causes the error to go away. I am removing the routing code to make the post more concise since I am now fairly confident that react-router is not causing this issue.

更新2:經過進一步的測試,我已經把這個范圍縮小到一個與反應-d3有關的問題。從我的網站上禁用的反應-d3代碼會導致錯誤消失。我正在刪除路由代碼,以使post更加簡潔,因為我現在相當有信心,因為這個問題不是由反應路由器引起的。

Update 3: Thanks to @CoryDanielson for creating the new tag for react-d3.

更新3:感謝@CoryDanielson為反應生成新標簽。

package.json

package.json

{
  "author": "me",
  "name": "my project",
  "description": "my awesome project",
  "version": "0.1.0",
  "dependencies": {
    "bootstrap": "^3.3.2",
    "d3": "^3.5.5",
    "font-awesome": "^4.3.0",
    "jquery": "^2.1.3",
    "react": "^0.13.2",
    "react-bootstrap": "^0.21.0",
    "react-d3": "^0.3.1",
    "react-router": "^0.13.2",
    "react-router-bootstrap": "~0.13.0",
    "reflux": "^0.2.6",
    "uuid": "^2.0.1"
  },
  "devDependencies": {
    "browser-sync": "^2.2.2",
    "browserify": "^9.0.3",
    "del": "^1.1.1",
    "envify": "^3.4.0",
    "gulp": "^3.8.11",
    "gulp-css-url-adjuster": "^0.2.3",
    "gulp-jshint": "^1.9.2",
    "gulp-minify-css": "^0.5.1",
    "gulp-sourcemaps": "^1.5.0",
    "gulp-uglify": "^1.1.0",
    "gulp-util": "^3.0.4",
    "gulp-watch": "^4.1.1",
    "reactify": "~1.1.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.0.0",
    "watchify": "^2.4.0"
  },
  "browserify": {
    "transform": [
      [
        "reactify",
        {
          "es6": false
        }
      ]
    ]
  },
}

6 个解决方案

#1


12  

I have figured this out. It comes down to a problem with the render function found in react-d3's linechart/DataSeries. The function checks the type of data by sampling the first element of the data array. However, it does not provide any check to see if the data array is empty.

我已經算出來了。它歸結為一個問題,在反應函數中發現了在反應-d3的linechart/DataSeries中。該函數通過采樣數據數組的第一個元素來檢查數據類型。但是,它不提供任何檢查來查看數據數組是否為空。

I had seen errors coming from LineChart before in the form of

我以前看到過來自LineChart的錯誤。

Uncaught TypeError: Cannot read property 'x' of undefined

However, I had ignored them since they were access errors and were not stopping the app from running. Something in React must have changed from v0.12.4 to v.0.13.2 such that these previously harmless errors are now breaking. I read the release notes for v0.13.0, v0.13.1, and v.0.13.2 but found nothing that states why this new error would occur. I have not had time to look at the code diff.

但是,我忽略了它們,因為它們是訪問錯誤,並沒有阻止應用程序運行。某些反應必須從v0.12.4變為v0.13.2,這樣以前無害的錯誤就會被破壞。我閱讀了v0.13.0、v0.13.1和v0.13.2的發行說明,但沒有發現任何說明新錯誤會發生的原因。我沒有時間查看代碼diff。

I had not connected the two errors because parts of LineChart still throw Uncaught TypeError: Cannot read property 'x' of undefined so I just assumed that the Uncaught TypeError: Cannot read property '_currentElement' of null error was a new one caused by the upgrade and was masking the additional cannot read x errors.

我沒有連接的兩個錯誤,因為部分LineChart仍扔未捕獲TypeError:無法讀取屬性定義的“x”所以我就假定未捕獲TypeError:無法讀取屬性的_currentElement零誤差是造成一個新的升級和掩蔽的額外不能讀x錯誤。

I will be submitting a pull-request to react-d3 shortly to correct this problem. Thank you all for your help.

我將在不久的將來提交一個請求來更正這個問題。謝謝大家的幫助。

Update: here is the pull-request

更新:這是請求。

#2


3  

I had the same exact problem with 0.13.2, however, the cause of my error and solution to it were a bit different:

我有同樣的問題,0。13.2,但是,我的錯誤和解決方案的原因有一點不同:

The error came down to my npm version. I was using npm 2.1.4 since upgrading (now at 2.8.4) and running npm update -g npm I was able to get everything working without touching my package.json or anything else.

錯誤出現在我的npm版本中。我使用npm 2.1.4升級(現在是2.8.4),運行npm update -g npm,我可以在不接觸包的情況下完成所有工作。json或其他。

Let me know if that works for you!

如果對你有用的話,請告訴我!

#3


3  

If it can help I had this same error with the Material-UI DropDownMenu component using the bad event Name prop (onItemChange instead of onChange).

如果它可以幫助我使用糟糕的事件名稱支持(onItemChange而不是onChange)來處理這個錯誤。

    <DropDownMenu menuItems={menuItems} onChange={this._onItemClick}/>

Using the right event prop name solved this issue for me.

使用正確的事件道具名稱為我解決了這個問題。

#4


2  

Spent all day wrestling with this issue and it ended up being due to console.warn calls from React.PropTypes validation failures. Once we fixed these PropType issues, IE9 started working again. (our issues were from data having undefined values instead of strings, and a suggestion to use the key attribute on some JSX)

花了一整天的時間來解決這個問題,結果是由於控制台。警告電話反應。proptype驗證失敗。一旦我們解決了這些問題,IE9又開始工作了。(我們的問題來自數據沒有定義的值,而不是字符串,並建議在一些JSX上使用key屬性)

HTML Boilerplate has a solution for this, which everybody should use: https://github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js#L2-L22

HTML Boilerplate有一個解決方案,每個人都應該使用:https://github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js#L2-L22。

// Avoid `console` errors in browsers that lack a console.
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());

Same issue as this: Why does JavaScript only work after opening developer tools in IE once?

同樣的問題:為什么JavaScript只在IE打開開發工具之后才開始工作?

#5


0  

Adding "babel-polyfill" solved the issue for me in IE11

添加“babel-polyfill”在IE11中為我解決了這個問題。

#6


-1  

I got this error when my app.jsx file referred to a List component and I forgot to include it with

當我的app.jsx文件提到一個列表組件時,我忘記了將它包含在其中。

var List = require('./list');

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/04/22/72f03fb44b75b56b6060069cd3688966.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com