Les objets ne sont pas valides comme réagir enfant (Dans Internet explorer 11 pour Réagir 15.4.1)

Les objets ne sont pas valides comme Réagir enfant (trouvé: objet avec les touches {$$typeof, le type, la clé, réf, des accessoires, des _owner, _store}). Si vous rendre une collection d'enfants, utiliser un tableau à la place ou à envelopper l'objet à l'aide createFragment(objet) de l'Réagissent add-ons. Vérifier la méthode de rendu de App.

AppContainer :

const mapDispatchToProps = (dispatch) => {
    return {

            }
        }
    }
}

Composant:

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

Ci-dessus est ma fonction rendu pour app.js. Ce Code fonctionne très bien dans google chrome, mais en venant à Internet explorer, Il n'est pas de travail et il est en train de jeter l'erreur ci-dessus.

Qu'est-ce que {cela.accessoires de jeu.les enfants}? une seule valeur ou d'un tableau?
oui nous dire ce qui est à venir comme this.props.children?
$$typeof : Symbole(réagir.élément) _owner: ReactCompositeComponentWrapper _self:null _source:null _store:Objet clé:null accessoires:Objet réf:null ,C'est l'Objet (ce.accessoires de jeu.enfants)
Je suppose que vous avez examiné votre question sur Stackoverflow et le web avant de poster. Dites-nous ce que vous avez trouvé et pourquoi il n'a pas d'aide? Voir Avant de Vous Demander.

InformationsquelleAutor LOKI321 | 2016-11-30

31

Un problème depuis Réagir 15.4 avec IE11

Si vous avez encore ce problème, vous pouvez avoir un coup d'oeil à cette réagissent question n ° 8379 à propos de Réagir 15.4 et IE11.
J'ai eu le même problème avec webpack dev mode /IE11 /Réagir 15.4, et il semble que de Réagir et de ReactDom chaque utilisation de leur version d'un Symbole polyfill (ce qui est nouveau avec 15,4):

En quelque sorte réagir et réagir-dom n'est plus "d'accord" sur le $$typeof valeur

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

Solution

J'ai résolu ce problème par la réorganisation polyfill et react /react-dom pour être sûr que le polyfill Symbole est chargée avant de Réagir et de ReactDom du Symbole... Maintenant, ils "d'accord" sur les $$typeof valeur.

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
]
```
- Je pense que votre solution est proche de mon problème, j'ai ES6.polyfill() dans mon code.Comment puis-je remplacer la Réagir et ReactDoms symbole?
- Notez que mon réagir et réagir-dom versions sont 15.4.1
- Vous devez vous assurer que votre ES6.polyfill() le code est chargé après Réagir et ReactDom sont chargés. Essayez de debug pour voir qui lib est chargé en premier, puis changer votre webpack de configuration si nécessaire.
- qui semble incorrect. Le polyfill doit passer AVANT toute autre chose, y compris réagir et réagir-dom
- merci de souligner ce point, n'a pas le vérifier.
- J'ai déplacé mon babel-polyfill instruction import pour après mon réagir et réagir-dom importations et maintenant, mon projet est de travailler. Je vois pas d'effets secondaires avec tous les appels à l'Objet.assign() ou autre chose couverts par le polyfill. Si quelqu'un d'autre, merci de le dire.
- Ce problème est fixe sur toute version ultérieure de Réagir?
- depuis le split de réagir / réagir-dom a été fait intentionnellement, je suppose que le problème est toujours présent sur les versions ultérieures, mais n'a pas eu l'occasion de le vérifier
InformationsquelleAutor François Maturel
7

Dans mon cas à Réagir Natif nous avons traîné ce mystérieux bug pendant des semaines, apparaissant seulement sur Android appuie sans joint le débogueur.

La coupable était un

import 'core-js'

sur la racine de notre composant, il semble que le polyfill était gâcher les choses

La solution était tout simplement de le supprimer car il n'est plus nécessaire dans mon cas

Partie pertinente de package.json
```
  "react-native": "0.44.2",
  "react": "16.0.0-alpha.6",
```
- Je reçois ce même problème (je n'ai pas une importation de base-js', je suis à l'aide d'importation "babel-polyfill'), comment êtes-vous jusqu'à la résolution de cette question en l'absence de retrait de votre polyfill?
- Nous avons exactement les mêmes versions de Réagir et de RN et après l'importation "de base-js/es6/symbole" nous avons l'exception suivante sur Android: ` les Objets ne sont pas valides comme Réagir enfant ... ` Est-ce la question que vous avez eu? Comment avez-vous le résoudre? Merci!
- J'ai résolu ce problème par l'importation de tous les polyfills dans index.android.js/index.ios.js fichiers, et de retarder l'importation de 'réagir' et 'réagir indigènes" jusqu'à ce composant racine App.js, qui est un fichier séparé.
InformationsquelleAutor Jaime Agudo

Ma question était de babel-polyfill nécessaires pour être au-dessus de ma réaction à chaud chargeur comprend. Réagir et réagir-dom devait précéder babel-polyfill dans le webpack entrée 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
]

de 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
]

de production:

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

InformationsquelleAutor Matt Goo

0

Mon Problème était le même et a été à l'aide de Réagir Natif et a été l'essai de l'application android sur ABD appareil/émulateur.

Après avoir vu des suggestions à partir de ci-dessus pour supprimer d'importation de base-js et à 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
]
```
pour android/app/build.gradle fichier, mon problème n'était pas résolu Car je n'ai pas eu du tout de l'instruction d'importation comme d'importation de base-js ou importer "babel-polyfill' d'abord dans mon code.

**

Solution:

**
Insted de retrait d'instruction import, j'ai ajouté la d'importation de base-js'; à mon répertoire racine qui a été index.js. Avec l'ajout manuellement à la bibliothèque via l'Invite de commande/Terminal.
Cela a résolu mon problème.Espérons que cette aide.

InformationsquelleAutor Rishabh Sharma

Dans mon cas, j'ai commencé mon projet avec réagir-slingshot et c'est 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 webpack.config.js fichier

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: réagir-app-polyfill

Espère que cela fonctionne également pour vous les gars!

InformationsquelleAutor Elkin Angulo

Vous devez vous connecter pour publier un commentaire.

Un problème depuis Réagir 15.4 avec IE11

Solution