web-dev-qa-db-ja.com

React= 0.13.2にアップグレードすると、「不明なTypeError：nullのプロパティ '_currentElement'を読み取れません」

Reactバージョンを0.12.2から0.13.2に、React-Routerを0.12.4から0.13.2にアップグレードしました。これら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にアップグレードしました（実際にはまだ使用していません）@BinaryMuseのコメントに基づく0.9.1から0.13.0-変更なし。

更新2：さらにテストした後、これを react-d の問題に絞り込みました。私のサイトからreact-d3コードを無効にすると、エラーがなくなります。現在、react-routerがこの問題の原因ではないと確信しているため、投稿を簡潔にするためにルーティングコードを削除しています。

Update 3：react-d の新しいタグを作成してくれた@CoryDanielsonに感謝します。

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
        }
      ]
    ]
  },
}
javascriptd3.jsreactjstypeerrorreact-d3
25
Matthew Herbst

私はこれを理解しました。 react-d の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をスローするため、2つのエラーを接続していませんでした。したがって、Uncaught TypeError: Cannot read property '_currentElement' of nullエラーはアップグレードによる新しいエラーであり、 x個のエラー。

この問題を修正するために、すぐにpull-requestをreact-d3に送信します。ご協力ありがとうございます。

更新：ここにプルリクエストがあります

12
Matthew Herbst

役立つ場合は、悪いイベントName prop（onChangeではなくonItemChange）を使用して、Material-UI DropDownMenuコンポーネントでこの同じエラーが発生しました。

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

適切なイベントプロップ名を使用することで、この問題は解決しました。

3
imaginair

0.13.2でもまったく同じ問題がありましたが、エラーの原因と解決方法は少し異なりました。

エラーは私のnpmバージョンに落ちました。アップグレード（現在2.8.4）からnpm 2.1.4を使用し、npm update -g npmを実行していました。package.jsonなどに触れることなくすべてを動作させることができました。

それがあなたのために働くかどうか私に知らせてください！

3
mattjstar

この問題に終日取り組んでおり、console.warn React.PropTypes検証エラーからの呼び出し。これらのPropTypeの問題を修正すると、IE9は再び機能し始めました。 （私たちの問題は、文字列の代わりに未定義の値を持つデータと、一部のJSXでキー属性を使用する提案からのものでした）

HTMLボイラープレートにはこれに対する解決策があり、誰もが使用する必要があります。 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 once？）で開発者ツールを開いた後にのみ機能しますか？

2
Cory Danielson

「babel-polyfill」を追加すると、IE11での問題が解決しました

0
Michael Falck Wedelgård