将React升级到0.13.2导致：“未捕获的类型错误：无法读取属性'_currentElement'为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。只是这两个升级没有别的，我现在得到以下错误时，我加载我的网页/应用程序：

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:

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.

导致错误的具体行是：

ReactRef.detachRefs(internalInstance, internalInstance._currentElement);

更新1：我也刚刚从版本1.0.0升级reactify 1.1.0和react-router-bootstrap（我实际上没有使用）从0.9.1到0.13.0基于@ BinaryMuse的意见 - 没有改变。

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.

更新2：经过进一步测试后，我将此问题缩小为 react-d3 。禁用我站点上的react-d3代码会导致错误消失。我删除路由代码使帖子更简洁，因为我现在相当自信，react-router不会导致这个问题。

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.

更新3：感谢@CoryDanielson为 react-d3 。

Update 3: Thanks to @CoryDanielson for creating the new tag for 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
        }
      ]
    ]
  },
}

推荐答案

我想出了这一点。这归结于在中找到的 render 函数的问题react-d3 的 linechart / DataSeries 。该函数通过采样数据数组的第一个元素来检查数据的类型。

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.

我看到错误来自 LineChart 之前的形式

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

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的发行说明，但发现没有说明为什么会出现这个新的错误。我没有时间看代码diff。

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.

我没有连接这两个错误，因为 LineChart still throw Uncaught TypeError：无法读取undefined 的属性'x'，所以我只是假设未捕获TypeError：无法读取属性'_currentElement'null

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.

我将提交一个拉取请求到react-d3来纠正这个问题。非常感谢您的帮助。

I will be submitting a pull-request to react-d3 shortly to correct this problem. Thank you all for your help.

更新： 这里是拉取请求

这篇关于将React升级到0.13.2导致：“未捕获的类型错误：无法读取属性'_currentElement'为null”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！