将 React 升级到 0.13.2 会导致:“未捕获的类型错误:无法读取 null 的属性‘_currentElement’”

IT技术 javascript d3.js reactjs typeerror react-d3
2021-05-15 20:50:12

我将我的 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:我也刚刚根据@BinaryMuse 的评论将 reactify 从 1.0.0 版升级到 1.1.0 并将 react-router-bootstrap(我还没有实际使用)从 0.9.1 升级到 0.13.0 - 没有变化。

更新 2:经过进一步测试,我将其范围缩小到react-d3的问题从我的站点禁用 react-d3 代码会导致错误消失。我正在删除路由代码以使帖子更简洁,因为我现在相当确信 react-router 不会导致此问题。

更新 3:感谢 @CoryDanielson 为react-d3创建新标签

包.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
        }
      ]
    ]
  },
}
4个回答

我已经想通了。它归结为同一个问题render函数发现react-D3linechart/DataSeries该函数通过对数据数组的第一个元素进行采样来检查数据的类型。但是,它不提供任何检查数据数组是否为空的检查。

我曾经看到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 提交一个 pull-request 来纠正这个问题。谢谢大家的帮助。

更新: 这是拉取请求

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

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

让我知道这是否适合您!

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

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

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

花了一整天的时间来解决这个问题,结果是由于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;
        }
    }
}());

与此相同的问题:为什么 JavaScript 只能在 IE 中打开开发人员工具一次后才能工作?