web-dev-qa-db-ja.com

オブジェクトはリアクション子として無効です（Internet Explorer 11ではReact 15.4.1）

オブジェクトはReact child（見つかった：キー{$$ typeof、type、key、ref、props、_owner、_store}を持つオブジェクト）としては無効です。）のコレクションをレンダリングする場合子、代わりに配列を使用するか、ReactアドオンからcreateFragment（object）を使用してオブジェクトをラップします。Appのrenderメソッドを確認します。

AppContainer：

const mapDispatchToProps = (dispatch) => {
    return {

            }
        }
    }
}

成分：

class App extends Component {
    render() {
        return (
        );
    }
}

上記はapp.jsのレンダリング関数です。このコードはgoogle chromeで正常に動作していますが、Internet Explorerにアクセスすると動作せず、上記のエラーがスローされます。

javascriptreactjsecmascript-6reduxinternet-explorer-11
24
LOKI321

IE11ではReact 15.4以来の問題

それでもこの問題が発生する場合は、 この反応＃8379についてReact 15.4およびIE11 を参照してください。webpackdevモードでも同じ問題が発生しました/ IE11/React 15.4、およびReactおよびReactDomはそれぞれバージョンのSymbolポリフィルを使用しているようです（これは15.4で新しく追加されました）：

_$$typeof_値について、どういうわけかリアクションとリアクションドームが「同意しない」

typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103である必要があります。

溶液

polyfillとreact/_react-dom_の順序を変更してこの問題を解決し、React and ReactDom's Symbol .. 。現在、彼らは$$ typeof値について「同意」しています。

Webpackの例：

_entry: [
 'babel-polyfill', // Load this first
 'react-hot-loader/patch', // This package already requires/loads react (but not react-dom). It must be loaded after babel-polyfill to ensure both react and react-dom use the same Symbol.
 'react', // Include this to enforce order
 'react-dom', // Include this to enforce order
 './index.js' // Path to your app's entry file
]
_
32
François Maturel

React Nativeの場合、デバッガーが接続されていないAndroidビルドにのみ表示されるこの謎のバグを数週間ドラッグしました。

犯人は

import 'core-js'

ルートコンポーネントでは、polyfillが混乱していたようです。

私の場合はもう必要ないので、解決策は単に削除することでした

package.jsonの関連部分

  "react-native": "0.44.2",
  "react": "16.0.0-alpha.6",
7
Jaime Agudo

私の問題は、react-hot-loaderを含むbabel-polyfillが必要でした。 Reactおよびreact-domは、このコメントで説明されている理由により、webpackエントリでbabel-polyfillに先行する必要がありました。

https://github.com/facebook/react/issues/8379#issuecomment-263962787 。

このように見えた：

開発者：

entry: [
  'babel-polyfill',
  'react-hot-loader/patch',
  `webpack-dev-server/client?${localhost}:${PORT}`,
  'webpack/hot/only-dev-server',
  PATHS.app
]

製造：

entry: [
  'babel-polyfill',
  'react',
  'react-dom',
  PATHS.app
]

以前...

開発者：

entry: [
  'react-hot-loader/patch',
  `webpack-dev-server/client?${localhost}:${PORT}`,
  'webpack/hot/only-dev-server',
  'babel-polyfill',
  PATHS.app
]

製造：

entry: [
  'babel-polyfill',
  PATHS.app
]
2
Matt Goo

私の問題は同じで、Reactネイティブを使用しており、ABDデバイス/エミュレーターでAndroidアプリをテストしていました。
上からの提案を確認した後、削除import 'core-js'および追加

entry: [
 'babel-polyfill', // Load this first
 'react-hot-loader/patch', // This package already requires/loads react (but not react-dom). It must be loaded after babel-polyfill to ensure both react and react-dom use the same Symbol.
 'react', // Include this to enforce order
 'react-dom', // Include this to enforce order
 './index.js' // Path to your app's entry file
]

android/app/build.gradleファイルに、import 'core-js'またはコードに最初に「babel-polyfill」をインポートします。

**

溶液：

** importステートメントを削除する代わりに、import 'core-js';をルートディレクトリであるindex.jsに追加しました。コマンドプロンプト/ターミナルを使用して手動でライブラリを追加します。これで私の問題は解決しました。

0
Rishabh Sharma

私の場合、私は react-slingshot でプロジェクトを開始しました。これは私のために働いた解決策です：

# from https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill   
$ npm install react-app-polyfill --save

次に、webpack.config.jsファイル

entry: [
    'react-app-polyfill/ie11', // <==== Important line and must be loaded before you code does
    path.resolve(__dirname, 'src/index.js')
],
target: 'web',
mode: 'development',
plugins: [
...

ここで完全なドキュメントを見ることができます： react-app-polyfill

これが皆さんにも役立つことを願っています！

0
Elkin Angulo