Javascript 将 React 升级到 0.13.2 会导致：“未捕获的类型错误：无法读取 null 的属性‘_currentElement’”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29786154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Upgrading React to 0.13.2 causes: "Uncaught TypeError: Cannot read property '_currentElement' of null"
提问by Matthew Herbst
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:
我将我的 React 版本从 0.12.2 升级到 0.13.2，我的 React-Router 从 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.
任何想法可能导致这种情况？我似乎对潜在的 React-Router 错误有一些参考，但没有确定性。
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：我也刚刚根据@BinaryMuse 的评论将 reactify 从 1.0.0 版升级到 1.1.0 并将 react-router-bootstrap（我实际上还没有使用）从 0.9.1 升级到 0.13.0 - 没有变化。
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：经过进一步测试，我将其范围缩小到react-d3的问题。从我的站点禁用 react-d3 代码会导致错误消失。我正在删除路由代码以使帖子更简洁，因为我现在相当确信 react-router 不会导致此问题。
Update 3:Thanks to @CoryDanielson for creating the new tag for react-d3.
更新 3：感谢 @CoryDanielson 为react-d3创建新标签。
package.json
包.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
}
]
]
},
}
采纳答案by Matthew Herbst
I have figured this out. It comes down to a problem with the renderfunction 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.
我已经想通了。它归结为同一个问题render函数发现反应-D3的linechart/DataSeries。该函数通过采样数据数组的第一个元素来检查数据类型。但是，它不提供任何检查以查看数据数组是否为空。
I had seen errors coming from LineChartbefore 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.
但是，我忽略了它们，因为它们是访问错误并且不会阻止应用程序运行。React 中的某些内容必须从 v0.12.4 更改为 v.0.13.2，以便这些以前无害的错误现在被破坏了。我阅读了 v0.13.0、v0.13.1 和 v.0.13.2 的发行说明，但没有发现任何说明会发生此新错误的原因。我没有时间看代码差异。
I had not connected the two errors because parts of LineChartstill throw Uncaught TypeError: Cannot read property 'x' of undefinedso I just assumed that the Uncaught TypeError: Cannot read property '_currentElement' of nullerror was a new one caused by the upgrade and was masking the additional cannot read x errors.
我没有连接这两个错误，因为部分LineChart仍然抛出，Uncaught TypeError: Cannot read property 'x' of undefined所以我只是假设该Uncaught TypeError: Cannot read property '_currentElement' of null错误是由升级引起的新错误，并掩盖了额外的无法读取 x 错误。
I will be submitting a pull-request to react-d3 shortly to correct this problem. Thank you all for your help.
我将很快向 react-d3 提交一个 pull-request 来纠正这个问题。谢谢大家的帮助。
Update:here is the pull-request
更新：这是拉取请求
回答by 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:
我在 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 版本。自从升级（现在是 2.8.4）并运行 npm update -g npm 以来，我一直在使用 npm 2.1.4 我能够在不触及 package.json 或其他任何东西的情况下让一切正常工作。
Let me know if that works for you!
让我知道这是否适合您！
回答by imaginair
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）在 Material-UI DropDownMenu 组件上遇到同样的错误。
<DropDownMenu menuItems={menuItems} onChange={this._onItemClick}/>
Using the right event prop name solved this issue for me.
使用正确的事件道具名称为我解决了这个问题。
回答by Cory Danielson
Spent all day wrestling with this issue and it ended up being due to console.warncalls 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)
花了一整天的时间来解决这个问题，最终结果是由于console.warn来自 React.PropTypes 验证失败的调用。一旦我们修复了这些 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?
回答by Michael Falck Wedelg?rd
Adding "babel-polyfill" solved the issue for me in IE11
在 IE11 中添加“babel-polyfill”为我解决了这个问题
回答by TastyCode
I got this error when my app.jsx file referred to a List component and I forgot to include it with
当我的 app.jsx 文件引用 List 组件时出现此错误，但我忘记将其包含在内
var List = require('./list');
