将 React 升级到 0.13.2 会导致：“未捕获的 TypeError：无法读取属性 '_currentElement' of null”答案

【问题标题】：Upgrading React to 0.13.2 causes: "Uncaught TypeError: Cannot read property '_currentElement' of null"将 React 升级到 0.13.2 会导致：“未捕获的 TypeError：无法读取属性 '_currentElement' of null”
【发布时间】：2015-04-22 01:29:22
【问题描述】：

我将我的 React 版本从 0.12.2 升级到 0.13.2，我的 React-Router 从 0.12.4 升级到 0.13.2。只进行这两次升级，没有其他任何事情，当我加载我的网页/应用程序时，我现在收到以下错误：

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（我实际上还没有使用）从 0.9.1 升级到 0.13。 0 基于@BinaryMuse 的 cmets - 没有变化。

更新 2： 经过进一步测试，我已将其缩小为 react-d3 的问题。从我的站点禁用 react-d3 代码会导致错误消失。我正在删除路由代码以使帖子更简洁，因为我现在相当有信心 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
        }
      ]
    ]
  },
}

【问题讨论】：

这个问题听起来有点熟悉，但我不记得是什么原因造成的。确保您用于 JSX 转换的任何内容都是最新的。（您应该能够删除 @jsx React.DOM 杂注注释，并且像 <Nav /> 这样的东西应该变成像 React.createElement(Nav) 这样的东西。
您的代码看起来不错（第 3 行缺少分号除外）。您是否在使用任何其他依赖于 React 的库？确保只有一个版本的 React 与您的应用程序捆绑在一起。
@BinaryMuse 我将 Reactify 从 v1.0.0 升级到 v1.1.0，但仍然出现错误。好主意！
@Morhaus，我更正了缺少的逗号，尽管它没有引起实际的变化。谢谢你的收获！
我为你添加了react-d3标签。

标签： javascript d3.js reactjs typeerror react-d3

【解决方案1】：

我已经想通了。这归结为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 提交拉取请求以纠正此问题。谢谢大家的帮助。

更新： here is the pull-request

【讨论】：

【解决方案2】：

我在 0.13.2 中遇到了同样的问题，但是，我的错误原因和解决方法有点不同：

错误归结为我的 npm 版本。自从升级（现在是 2.8.4）并运行 npm update -g npm 以来，我一直在使用 npm 2.1.4，我能够在不触及我的 package.json 或其他任何东西的情况下让一切正常工作。

让我知道这是否适合你！

【讨论】：

是的，但我想我会留下这个答案，因为这是出现在 google 上的第一件事，而且对于同样的问题，我有一个完全不同的解决方案。
知道这可能如何为您解决问题吗？只是好奇。

【解决方案3】：

如果它可以帮助我在 Material-UI DropDownMenu 组件中使用错误的事件名称道具（onItemChange 而不是 onChange）遇到同样的错误。

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

使用正确的事件道具名称为我解决了这个问题。

【讨论】：

【解决方案4】：

花了一整天的时间来解决这个问题，它最终是由于来自 React.PropTypes 验证失败的 console.warn 调用。一旦我们修复了这些 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?

【讨论】：

不能说我什至考虑过没有控制台的浏览器！
console 对象在 IE9 中不存在，除非您打开控制台。这不是开玩笑。如果您尝试在未打开控制台的情况下使用它，JavaScript 会抛出错误。 stackoverflow.com/questions/7742781/…
这可能解释了为什么我的代码无法在 IE 中运行——我刚刚放弃了对它的支持，呵呵。猜猜我会开始使用npmjs.com/package/gulp-strip-debug
是的，您肯定想剥离控制台语句和调试器以进行产品构建。

【解决方案5】：

添加“babel-polyfill”为我解决了 IE11 中的问题

【讨论】：

【解决方案6】：

当我的 app.jsx 文件引用一个 List 组件并且我忘记包含它时，我收到了这个错误

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

【讨论】：