1. 技术文章
  2. Upgrading React to 0.13.2 causes: “Uncaught TypeError: Cannot read property '_currentElement' of null”

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

由 為{幸葍}努か 提交于 2019-12-03 09:34:20

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.

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

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.

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.

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

mattjstar

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

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.

Let me know if that works for you!

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

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

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

Cory Danielson

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)

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

// 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?

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

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

var List = require('./list');
标签
javascript
d3.js
reactjs
typeerror
react-d3
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!