Violation invariante: les objets ne sont pas valides en tant qu'enfant React

Dans la fonction de rendu de mon composant, j'ai:

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

tout se passe bien, cependant en cliquant sur le <li> élément, je reçois l'erreur suivante:

Erreur non détectée: violation invariante: les objets ne sont pas valides en tant qu'enfant React (trouvé: objet avec clés {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bubble, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX , screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, bouton, boutons, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). Si vous vouliez rendre une collection d'enfants, utilisez plutôt un tableau ou encapsulez l'objet à l'aide de createFragment (objet) à partir des modules complémentaires React. Vérifiez la méthode de rendu deWelcome .

Si je change pour this.onItemClick.bind(this, item) à l' (e) => onItemClick(e, item)intérieur de la fonction de carte tout fonctionne comme prévu.

Si quelqu'un pouvait expliquer ce que je fais mal et expliquer pourquoi j'obtiens cette erreur, ce serait bien

MISE À JOUR 1: la
fonction onItemClick est la suivante et la suppression de this.setState entraîne la disparition de l'erreur.

onItemClick(e, item) {
    this.setState({
      lang: item,
    });
}

Mais je ne peux pas supprimer cette ligne car j'ai besoin de mettre à jour l'état de ce composant

J'avais cette erreur et il s'est avéré que j'incluais involontairement un objet dans mon code JSX que je m'attendais à être une valeur de chaîne:

return (
    <BreadcrumbItem href={routeString}>
        {breadcrumbElement}
    </BreadcrumbItem>
)

breadcrumbElementutilisé pour être une chaîne, mais en raison d'un refactor est devenu un objet. Malheureusement, le message d'erreur de React n'a pas fait du bon travail en me pointant vers la ligne où le problème existait. J'ai dû suivre ma trace de pile tout le long du chemin jusqu'à ce que je reconnaisse les «accessoires» transmis à un composant, puis j'ai trouvé le code incriminé.

Vous devrez soit référencer une propriété de l'objet qui est une valeur de chaîne, soit convertir l'objet en une représentation de chaîne souhaitable. Une option pourrait être JSON.stringifysi vous voulez réellement voir le contenu de l'objet.

J'ai donc eu cette erreur en essayant d'afficher la createdAtpropriété qui est un objet Date. Si vous concaténez .toString()à la fin comme ceci, il fera la conversion et éliminera l'erreur. Il suffit de poster ceci comme une réponse possible au cas où quelqu'un d'autre rencontrerait le même problème:

{this.props.task.createdAt.toString()}

Je viens de recevoir la même erreur mais en raison d'une erreur différente: j'ai utilisé des accolades doubles comme:

{{count}}

pour insérer la valeur de countau lieu de la bonne:

{count}

dans lequel le compilateur s'est vraisemblablement transformé {{count: count}}, c'est-à-dire en essayant d'insérer un objet en tant qu'enfant React.

J'ai pensé que j'allais ajouter à cela car j'avais le même problème aujourd'hui, il s'avère que c'était parce que je retournais juste la fonction, quand je l'ai enveloppée dans une <div>balise, elle a commencé à fonctionner, comme ci-dessous

renderGallery() {
  const gallerySection = galleries.map((gallery, i) => {
    return (
      <div>
        ...
      </div>
    );
  });
  return (
    {gallerySection}
  );
}

Ce qui précède a provoqué l'erreur. J'ai résolu le problème en changeant la return()section en:

return (
  <div>
    {gallerySection}
  </div>
);

...ou simplement:

return gallerySection

React child (singulier) doit être un type de type de données primitif et non un objet ou il peut s'agir d'une balise JSX (ce qui n'est pas le cas dans notre cas) . Utilisez le package Proptypes en développement pour vous assurer que la validation a lieu.

Juste une comparaison rapide d'extrait de code (JSX) pour vous représenter avec idée:

1. Erreur: avec un objet transmis à l'enfant

   <div>
   {/* item is object with user's name and its other details on it */}
    {items.map((item, index) => {
     return <div key={index}>
   --item object invalid as react child--->>>{item}</div>;
    })}
   </div>

2. Sans erreur: avec la propriété de l'objet ( qui doit être primitive, c'est-à-dire une valeur de chaîne ou une valeur entière ) transmise à l'enfant.

   <div>
    {/* item is object with user's name and its other details on it */}
     {items.map((item, index) => {
      return <div key={index}>
   --note the name property is primitive--->{item.name}</div>;
     })}
   </div>

TLDR; (De la source ci-dessous): Assurez-vous que tous les éléments que vous effectuez dans JSX sont des primitives et non des objets lorsque vous utilisez React. Cette erreur se produit généralement car une fonction impliquée dans la répartition d'un événement a reçu un type d'objet inattendu (c'est-à-dire passer un objet alors que vous devriez passer une chaîne) ou une partie du JSX dans votre composant ne fait pas référence à une primitive (c'est-à-dire this.props vs this.props.name).

Source - codingbismuth.com

Le mien avait à voir avec la mise inutilement d'accolades autour d'une variable contenant un élément HTML à l'intérieur de l'instruction return de la fonction render (). Cela a amené React à le traiter comme un objet plutôt que comme un élément.

render() {
  let element = (
    <div className="some-class">
      <span>Some text</span>
    </div>
  );

  return (
    {element}
  )
}

Une fois que j'ai supprimé les accolades de l'élément, l'erreur a disparu et l'élément a été rendu correctement.

Le mien avait à voir avec l'oubli des accolades autour des accessoires envoyés à un composant de présentation:

Avant:

const TypeAheadInput = (name, options, onChange, value, error) => {

Après

const TypeAheadInput = ({name, options, onChange, value, error}) => {

Moi aussi, j'obtenais cette erreur «Les objets ne sont pas valides en tant qu'enfant React» et pour moi, la cause était due à l'appel d'une fonction asynchrone dans mon JSX. Voir ci-dessous.

class App extends React.Component {
    showHello = async () => {
        const response = await someAPI.get("/api/endpoint");

        // Even with response ignored in JSX below, this JSX is not immediately returned, 
        // causing "Objects are not valid as a React child" error.
        return (<div>Hello!</div>);
    }

    render() {
        return (
            <div>
                {this.showHello()}
            </div>
        );
    }
}

Ce que j'ai appris, c'est que le rendu asynchrone n'est pas pris en charge dans React. L'équipe React travaille sur une solution telle que documentée ici .

Pour toute personne utilisant Firebase avec Android, cela ne fait que casser Android. Mon émulation iOS l'ignore.

Et comme indiqué par Apoorv Bankey ci-dessus.

Tout ce qui est supérieur à Firebase V5.0.3, pour Android, atm est un buste. Réparer:

npm i --save firebase@5.0.3

Confirmé plusieurs fois ici https://github.com/firebase/firebase-js-sdk/issues/871

J'ai aussi le même problème mais mon erreur est tellement stupide. J'essayais d'accéder directement à l'objet.

class App extends Component {
    state = {
        name:'xyz',
        age:10
    }
    render() {
        return (
            <div className="App">
                // this is what I am using which gives the error
                <p>I am inside the {state}.</p> 

                //Correct Way is

                <p>I am inside the {this.state.name}.</p> 
            </div>
        );
    }                                                                             

}

Si, pour une raison quelconque, vous avez importé Firebase. Essayez ensuite de courir npm i --save [email protected]. Cela est dû au fait que Firebase Break réagit nativement, donc l'exécuter résoudra le problème.

Dans mon cas, j'ai oublié de renvoyer un élément html dans la fonction de rendu et je retournais un objet. Ce que j'ai fait, c'est que j'ai simplement enveloppé les {items} avec un élément html - une simple div comme ci-dessous

<ul>{items}</ul>

J'ai eu le même problème parce que je n'ai pas mis les propsaccolades.

export default function Hero(children, hero ) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

Donc, si votre code est similaire à celui ci-dessus, vous obtiendrez cette erreur. Pour résoudre ce problème, placez simplement des accolades autour du props.

export default function Hero({ children, hero }) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

J'ai la même erreur, j'ai changé ça

export default withAlert(Alerts)

pour ça

export default withAlert()(Alerts).

Dans les anciennes versions, l'ancien code était correct, mais dans les versions ultérieures, il génère une erreur. Utilisez donc le code ultérieur pour éviter l'erreur.

Dans mon cas, l'erreur s'est produite car j'ai renvoyé un tableau d'éléments entre accolades au lieu de simplement renvoyer le tableau lui-même.

Code avec erreur

   render() {
        var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
        );
        return {rows};
    }

Code correct

render() {
    var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
    );
    return rows;
}

Vous utilisiez simplement les clés de l'objet, au lieu de l'objet entier!

Plus de détails peuvent être trouvés ici: https://github.com/gildata/RAIO/issues/48

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class SCT extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            data: this.props.data,
            new_data: {}
        };
    }
    componentDidMount() {
        let new_data = this.state.data;
        console.log(`new_data`, new_data);
        this.setState(
            {
                new_data: Object.assign({}, new_data)
            }
        )
    }
    render() {
        return (
            <div>
                this.state.data = {JSON.stringify(this.state.data)}
                <hr/>
                <div style={{color: 'red'}}>
                    {this.state.new_data.name}<br />
                    {this.state.new_data.description}<br />
                    {this.state.new_data.dependtables}<br />
                </div>
            </div>
        );
    }
}

SCT.propTypes = {
    test: PropTypes.string,
    data: PropTypes.object.isRequired
};

export {SCT};
export default SCT;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

J'ai le même problème, dans mon cas, je mets à jour le redux état et les nouveaux paramètres de données ne correspondent pas aux anciens paramètres, donc quand je veux accéder à certains paramètres via cette erreur,

Peut-être que cette expérience aide quelqu'un

Si vous utilisez Firebase et voyez cette erreur, il vaut la peine de vérifier si vous l'importez correctement. Depuis la version 5.0.4, vous devez l'importer comme ceci:

import firebase from '@firebase/app'
import '@firebase/auth';
import '@firebase/database';
import '@firebase/storage';

Oui je sais. J'ai perdu 45 minutes là-dessus aussi.

En général, cela apparaît parce que vous ne détruisez pas correctement. Prenez ce code par exemple:

const Button = text => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

Nous le = text =>déclarons avec le param. Mais vraiment, React s'attend à ce que ce soit un propsobjet englobant .

Donc, nous devrions vraiment faire quelque chose comme ça:

const Button = props => <button>{props.text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

Remarquez la différence? Le propsparamètre ici pourrait être nommé n'importe quoi (props c'est juste la convention qui correspond à la nomenclature), React attend juste un objet avec des clés et des valeurs.

Avec la déstructuration d'objets, vous pouvez faire et verrez souvent quelque chose comme ceci:

const Button = ({ text }) => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

... qui fonctionne.

Il y a de fortes chances que quiconque tombe sur ce point ait déclaré accidentellement les accessoires de ses composants sans les déstructurer.

Je viens de me mettre à travers une version vraiment stupide de cette erreur, que je pourrais aussi partager ici pour la postérité.

J'ai eu du JSX comme ça:

...
{
  ...
  <Foo />
  ...
}
...

J'avais besoin de commenter cela pour déboguer quelque chose. J'ai utilisé le raccourci clavier dans mon IDE, ce qui a abouti à ceci:

...
{
  ...
  { /* <Foo /> */ }
  ...
}
...

Ce qui est, bien sûr, invalide - les objets ne sont pas valides comme réagissent les enfants!

Je voudrais ajouter une autre solution à cette liste.

Spécifications:

• "react": "^ 16.2.0",
• "react-dom": "^ 16.2.0",
• "react-redux": "^ 5.0.6",
• "react-scripts": "^ 1.0.17",
• "redux": "^ 3.7.2"

J'ai rencontré la même erreur:

Erreur non interceptée: les objets ne sont pas valides en tant qu'enfant React (trouvé: objet avec les clés {XXXXX}). Si vous vouliez rendre une collection d'enfants, utilisez plutôt un tableau.

C'était mon code:

let payload = {
      guess: this.userInput.value
};

this.props.dispatch(checkAnswer(payload));

Solution:

  // let payload = {
  //   guess: this.userInput.value
  // };

this.props.dispatch(checkAnswer(this.userInput.value));

Le problème se produisait car la charge utile envoyait l'élément en tant qu'objet. Lorsque j'ai supprimé la variable de charge utile et mis la valeur userInput dans la répartition, tout a commencé à fonctionner comme prévu.

Si vous utilisez Firebase l'un des fichiers de votre projet. Ensuite, placez simplement cette déclaration d'importation Firebase à la fin !!

Je sais que cela semble fou, mais essayez-le !!

Mon problème était simple lorsque j'ai rencontré l'erreur suivante:

objects are not valid as a react child (found object with keys {...}

était juste que je passais un objet avec des clés spécifiées dans l'erreur en essayant de rendre l'objet directement dans un composant en utilisant {object} en m'attendant à ce qu'il soit une chaîne

object: {
    key1: "key1",
    key2: "key2"
}

lors du rendu sur un composant React, j'ai utilisé quelque chose comme ci-dessous

render() {
    return this.props.object;
}

mais il aurait dû être

render() {
    return this.props.object.key1;
}

Si vous utilisez des composants sans état, suivez ce type de format:

const Header = ({pageTitle}) => (
  <h1>{pageTitle}</h1>
);
export {Header};

Cela a semblé fonctionner pour moi

Quelque chose comme ça vient de m'arriver ...

J'ai écrit:

{response.isDisplayOptions &&
{element}
}

Le placer à l'intérieur d'un div fixe:

{response.isDisplayOptions &&
    <div>
        {element}
    </div>
}

Trouvé: objet avec clés

Ce qui signifie que vous passez quelque chose est une valeur-clé. Vous devez donc modifier votre gestionnaire:

onItemClick(e, item) {
   this.setState({
     lang: item,
   });
}

onItemClick({e, item}) {
  this.setState({
    lang: item,
  });
}

Vous avez raté les accolades ( {}).

Dans mon cas, j'ai ajouté un async à mon composant de fonction enfant et j'ai rencontré cette erreur. N'utilisez pas async avec le composant enfant.

En cas d'utilisation de Firebase, si cela ne fonctionne pas en mettant à la fin des importinstructions, vous pouvez essayer de mettre cela à l'intérieur de la méthode du cycle de vie, c'est-à-dire que vous pouvez le mettre à l'intérieur componentWillMount().

componentWillMount() {
    const firebase = require('firebase');
    firebase.initializeApp({
        //Credentials
    });
}

Invariant Violation: Objects are not valid as a React childqui m'est arrivé lors de l'utilisation d'un composant qui avait besoin d' renderItemaccessoires, comme:

renderItem={this.renderItem}

et mon erreur a été de faire ma renderItemméthode async.

Mon erreur était due à l'écriture de cette façon:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff} </p>)
})

au lieu de:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff.name} </p>)
})

Cela signifiait que j'essayais de rendre l'objet au lieu de la valeur qu'il contenait.

edit: c'est pour réagir non natif.