wake-up-neo.com

Objekte gelten nicht als reagiertes untergeordnetes Element (In Internet Explorer 11 für React 15.4.1)

Objekte sind nicht als untergeordnetes Reakt gültig (gefunden: Objekt mit Schlüsseln {$$ typeof, type, key, ref, requisiten, _owner, _store}). Wenn Sie eine Sammlung von untergeordneten Objekten darstellen möchten, verwenden Sie stattdessen ein Array oder wickeln Sie das Objekt mit createFragment (object) aus den React-Add-Ons ein. Überprüfen Sie die Render-Methode von App.

AppContainer: 

const mapDispatchToProps = (dispatch) => {
    return {

            }
        }
    }
}

Komponente:

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

Oben ist meine Renderfunktion für app.js. Dieser Code funktioniert in Google Chrome einwandfrei, aber wenn er zu Internet Explorer kommt, funktioniert er nicht und es wird der obige Fehler ausgegeben.

javascriptreactjsecmascript-6reduxinternet-explorer-11
21
LOKI321

Ein Problem seit React 15.4 mit IE11

Wenn Sie immer noch dieses Problem haben, schauen Sie sich this reagieren Ausgabe # 8379 über React 15.4 und IE11 ..__ an. Ich hatte das gleiche Problem mit webpack dev mode/IE11/React 15.4 und es scheint so React und ReactDom verwenden jeweils ihre Version einer Symbol-Polyfill (dies ist neu mit 15.4): 

Irgendwie "reagieren" und "reagieren" nicht mehr auf den $$typeof-Wert

was sollte typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103 sein.

Lösung

Ich habe dieses Problem behoben, indem Sie polyfill und react/react-dom neu angeordnet haben, um sicherzustellen, dass das Polyfill-Symbol vor React und ReactDom-Symbol geladen wird.

Beispiel für 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
]
29
François Maturel

In meinem Fall mit React Native haben wir diesen mysteriösen Bug über Wochen hinweg auf Android-Builds ohne eingebauten Debugger gezogen. 

Der Täter war ein

import 'core-js'

an unserer Wurzelkomponente scheint es, dass polyfill die Dinge durcheinander gebracht hat

Die Lösung bestand darin, es einfach zu entfernen, da es in meinem Fall nicht mehr erforderlich ist

Relevanter Teil von package.json

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

Mein Problem war, dass Babel-Polyfill über meinem Reaktions-Hot-Loader liegen musste. React und ReactDom, die erforderlich waren, um babel-polyfill im Webpack-Eintrag aus den in diesem Kommentar beschriebenen Gründen vorzustellen: 

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

Sah so aus:

dev:

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

produktion:

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

Vorher...

dev:

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

produktion:

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

Mein Problem war dasselbe und verwendete React Native und testete die Android-App auf einem ABD-Gerät/Emulator .
Nachdem Sie die oben genannten Vorschläge zum Entfernen von 'core-js' und zum Hinzufügen von gesehen haben 

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
]

in Android/app/build.gradle-Datei wurde mein Problem nicht gelöst. Da ich keine der Importanweisungen wie import 'core-js' oder importiere 'babel-polyfill' hatte mein code 

**

Lösung:

** Beim Entfernen der Importanweisung wurde der import 'core-js' hinzugefügt. zu meinem Stammverzeichnis, das index.js war. Durch manuelles Hinzufügen der Bibliothek über den Befehl Prompt/Terminal .. __ Dies hat mein Problem gelöst.

0
Rishabh Sharma

In meinem Fall habe ich mein Projekt mit react-slingshot gestartet und dies ist eine Lösung, die für mich funktioniert hat

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

Dann in der webpack.config.js-Datei

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: [
...

Die vollständige Dokumentation finden Sie hier: -react-app-polyfill

Ich hoffe, das funktioniert auch für euch!

0
Elkin Angulo