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"
我将我的 React 版本从 0.12.2 升级到 0.13.2,并将我的 React-Router 从 0.12.4 升级到 0.13.2。只做这两个升级,没有别的,我现在在加载 webpage/app:
时收到以下错误
Uncaught TypeError: Cannot read property '_currentElement' of null
知道是什么原因造成的吗?我似乎提到了一些潜在的 React-Router 错误,但没有确定的。
导致错误的具体行是:
ReactRef.detachRefs(internalInstance, internalInstance._currentElement);
更新 1: 我也刚刚将 reactify 从版本 1.0.0 升级到 1.1.0 和 react-router-bootstrap(我实际上并没有使用yet)从 0.9.1 到 0.13.0,基于@BinaryMuse 的评论——没有变化。
更新 2: 经过进一步测试,我已将其缩小为 react-d3 的问题。从我的站点禁用 react-d3 代码会导致错误消失。我正在删除路由代码以使 post 更简洁,因为我现在相当确信 react-router 不会导致此问题。
更新 3: 感谢@CoryDanielson 为 react-d3.
创建新标签
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
}
]
]
},
}
我已经弄明白了。这归结为 react-d3 的 linechart/DataSeries
中的 render
函数存在问题。该函数通过对数据数组的第一个元素进行采样来检查数据的类型。但是,它不提供任何检查以查看数据数组是否为空。
我之前看到过来自 LineChart
的错误,形式为
Uncaught TypeError: Cannot read property 'x' of undefined
但是,我忽略了它们,因为它们是访问错误并且不会从 运行 停止应用程序。 React 中的某些东西一定已经从 v0.12.4 更改为 v.0.13.2,以至于这些以前无害的错误现在被打破了。我阅读了 v0.13.0、v0.13.1 和 v.0.13.2 的发行说明,但没有发现任何说明为什么会出现此新错误的内容。我还没来得及看代码差异。
我没有连接这两个错误,因为 LineChart
的某些部分仍然抛出 Uncaught TypeError: Cannot read property 'x' of undefined
所以我只是假设 Uncaught TypeError: Cannot read property '_currentElement' of null
错误是由升级引起的新错误并且被屏蔽了附加无法读取 x 个错误。
我将很快向 react-d3 提交拉取请求以更正此问题。谢谢大家的帮助。
我在 0.13.2 中遇到了同样的问题,但是,我的错误原因和解决方法有点不同:
错误归结为我的 npm 版本。自从升级(现在是 2.8.4)和 运行 npm update -g npm 以来,我一直在使用 npm 2.1.4 我能够在不触及我的 package.json 或其他任何东西的情况下让一切正常工作。
让我知道这是否适合您!
花了一整天的时间来解决这个问题,结果是由于 console.warn
来自 React.PropTypes 验证失败的调用。一旦我们解决了这些 PropType 问题,IE9 就可以重新开始工作了。 (我们的问题来自具有未定义值而不是字符串的数据,以及在某些 JSX 上使用 key 属性的建议)
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;
}
}
}());
与此相同的问题:Why does JavaScript only work after opening developer tools in IE once?
如果它可以帮助我使用错误的事件名称道具(onItemChange 而不是 onChange)在 Material-UI DropDownMenu 组件中遇到了同样的错误。
<DropDownMenu menuItems={menuItems} onChange={this._onItemClick}/>
使用正确的事件道具名称为我解决了这个问题。
我的 app.jsx 文件引用列表组件时出现此错误,但我忘记将其包含在
中
var List = require('./list');
添加 "babel-polyfill" 解决了我在 IE11 中的问题
我将我的 React 版本从 0.12.2 升级到 0.13.2,并将我的 React-Router 从 0.12.4 升级到 0.13.2。只做这两个升级,没有别的,我现在在加载 webpage/app:
时收到以下错误Uncaught TypeError: Cannot read property '_currentElement' of null
知道是什么原因造成的吗?我似乎提到了一些潜在的 React-Router 错误,但没有确定的。
导致错误的具体行是:
ReactRef.detachRefs(internalInstance, internalInstance._currentElement);
更新 1: 我也刚刚将 reactify 从版本 1.0.0 升级到 1.1.0 和 react-router-bootstrap(我实际上并没有使用yet)从 0.9.1 到 0.13.0,基于@BinaryMuse 的评论——没有变化。
更新 2: 经过进一步测试,我已将其缩小为 react-d3 的问题。从我的站点禁用 react-d3 代码会导致错误消失。我正在删除路由代码以使 post 更简洁,因为我现在相当确信 react-router 不会导致此问题。
更新 3: 感谢@CoryDanielson 为 react-d3.
创建新标签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
}
]
]
},
}
我已经弄明白了。这归结为 react-d3 的 linechart/DataSeries
中的 render
函数存在问题。该函数通过对数据数组的第一个元素进行采样来检查数据的类型。但是,它不提供任何检查以查看数据数组是否为空。
我之前看到过来自 LineChart
的错误,形式为
Uncaught TypeError: Cannot read property 'x' of undefined
但是,我忽略了它们,因为它们是访问错误并且不会从 运行 停止应用程序。 React 中的某些东西一定已经从 v0.12.4 更改为 v.0.13.2,以至于这些以前无害的错误现在被打破了。我阅读了 v0.13.0、v0.13.1 和 v.0.13.2 的发行说明,但没有发现任何说明为什么会出现此新错误的内容。我还没来得及看代码差异。
我没有连接这两个错误,因为 LineChart
的某些部分仍然抛出 Uncaught TypeError: Cannot read property 'x' of undefined
所以我只是假设 Uncaught TypeError: Cannot read property '_currentElement' of null
错误是由升级引起的新错误并且被屏蔽了附加无法读取 x 个错误。
我将很快向 react-d3 提交拉取请求以更正此问题。谢谢大家的帮助。
我在 0.13.2 中遇到了同样的问题,但是,我的错误原因和解决方法有点不同:
错误归结为我的 npm 版本。自从升级(现在是 2.8.4)和 运行 npm update -g npm 以来,我一直在使用 npm 2.1.4 我能够在不触及我的 package.json 或其他任何东西的情况下让一切正常工作。
让我知道这是否适合您!
花了一整天的时间来解决这个问题,结果是由于 console.warn
来自 React.PropTypes 验证失败的调用。一旦我们解决了这些 PropType 问题,IE9 就可以重新开始工作了。 (我们的问题来自具有未定义值而不是字符串的数据,以及在某些 JSX 上使用 key 属性的建议)
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;
}
}
}());
与此相同的问题:Why does JavaScript only work after opening developer tools in IE once?
如果它可以帮助我使用错误的事件名称道具(onItemChange 而不是 onChange)在 Material-UI DropDownMenu 组件中遇到了同样的错误。
<DropDownMenu menuItems={menuItems} onChange={this._onItemClick}/>
使用正确的事件道具名称为我解决了这个问题。
我的 app.jsx 文件引用列表组件时出现此错误,但我忘记将其包含在
中var List = require('./list');
添加 "babel-polyfill" 解决了我在 IE11 中的问题