web-dev-qa-db-fra.com

Les objets ne sont pas valides en tant qu'enfant de réaction (dans Internet Explorer 11 pour React 15.4.1)

Les objets ne sont pas valides en tant qu'enfants React (trouvés: objet avec les clés {$$ typeof, type, clé, ref, props, _owner, _store}). Si vous vouliez rendre une collection d'enfants, utilisez plutôt un tableau ou enveloppez l'objet à l'aide de createFragment (objet) à partir des add-ons de React. Vérifiez la méthode de rendu de App.

AppContainer: 

const mapDispatchToProps = (dispatch) => {
    return {

            }
        }
    }
}

Composant:

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

Ci-dessus, ma fonction de rendu pour app.js. Ce code fonctionne bien dans Google Chrome, mais lorsqu’il arrive à Internet Explorer, il ne fonctionne pas et génère l’erreur ci-dessus.

javascriptreactjsecmascript-6reduxinternet-explorer-11
21
LOKI321

Un problème depuis React 15.4 avec IE11

Si vous avez toujours ce problème, vous pouvez consulter ce problème de réaction, numéro 8379 concernant React 15.4 et IE11 . J'ai eu le même problème avec Webpack dev mode/IE11/React 15.4 et il semble que React et ReactDom utilisent chacun leur version d'un symbole polyfill (ceci est nouveau avec 15.4): 

D'une manière ou d'une autre, réagissez et ne réagissez plus avec la valeur $$typeof

qui devrait être typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103.

Solution

J'ai résolu ce problème en réordonnant polyfill et react/react-dom pour m'assurer que le symbole polyfill est chargé avant le symbole de React et de ReactDom ... Maintenant, ils sont "d'accord" sur la valeur $$ typeof.

Exemple pour 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

Dans mon cas avec React Native, nous avons traîné ce mystérieux bogue pendant des semaines, apparaissant uniquement sur des versions Android sans un débogueur attaché. 

Le le coupable était un

import 'core-js'

sur notre composant racine, il semble que polyfill foutait en l'air

La solution était simplement de l'enlever car ce n'est plus nécessaire dans mon cas.

Partie pertinente de package.json

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

Mon problème était que babel-polyfill devait être au-dessus de mon chargement de réact-hot-loader. React et react-dom devaient précéder babel-polyfill dans l'entrée du pack Web pour les raisons décrites par ce commentaire: 

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

Ressemblait à ceci:

dev:

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

production:

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

Précédemment...

dev:

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

production:

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

Mon problème était identique et utilisais React Native et testait l'application Android sur un périphérique/émulateur ABD .
Après avoir vu les suggestions ci-dessus pour supprimer importer 'core-js' et pour ajouter 

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
]

dans le fichier Android/app/build.gradle, mon problème n’a pas été résolu. Comme je n’avais aucune déclaration d’importation telle que importer 'core-js' ou importer 'babel-polyfill' initialement dans mon code. 

**

Solution:

** Institué de la suppression de la déclaration d'importation, j'ai ajouté le import 'core-js'; vers mon répertoire racine qui était index.js. Avec l'ajout manuel de la bibliothèque à l'aide de la commande Invite/Terminal .Cela a résolu mon problème.Espoir que cela aide.

0
Rishabh Sharma

Dans mon cas, j'ai commencé mon projet avec react-slingshot et voici une solution qui a fonctionné pour moi

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

Puis dans le fichier 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: [
...

Vous pouvez voir la documentation complète ici: react-app-polyfill

J'espère que cela fonctionne aussi pour vous!

0
Elkin Angulo