Invariante Verletzung: Objekte sind als untergeordnetes Kind nicht gültig

In der Renderfunktion meiner Komponente habe ich:

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>
    );
  }

Alles wird gut, aber wenn Sie auf klicken <li> ich Element klicke, erhalte ich die folgende Fehlermeldung:

Nicht erfasster Fehler: Invariante Verletzung: Objekte sind als untergeordnetes Reagieren nicht gültig (gefunden: Objekt mit Schlüsseln {dispatchConfig, dispatchMarker, nativeEvent, Ziel, aktuelles Ziel, Typ, eventPhase, Blasen, stornierbar, Zeitstempel, defaultPrevented, isTrusted, Ansicht, Detail, screenX , screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, Schaltfläche, Schaltflächen, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). Wenn Sie eine Sammlung von untergeordneten Elementen rendern möchten, verwenden Sie stattdessen ein Array oder schließen Sie das Objekt mit createFragment (Objekt) aus den React-Add-Ons ein. Überprüfen Sie die Rendermethode vonWelcome .

Wenn ich zu wechsle this.onItemClick.bind(this, item) , um (e) => onItemClick(e, item)innerhalb der Map - Funktion funktioniert alles wie erwartet.

Wenn jemand erklären könnte, was ich falsch mache und warum ich diesen Fehler bekomme, wäre das großartig

UPDATE 1:
Die Funktion onItemClick lautet wie folgt : Wenn Sie this.setState entfernen, verschwindet der Fehler.

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

Ich kann diese Zeile jedoch nicht entfernen, da ich den Status dieser Komponente aktualisieren muss

Ich hatte diesen Fehler und es stellte sich heraus, dass ich unbeabsichtigt ein Objekt in meinen JSX-Code aufgenommen habe, von dem ich erwartet hatte, dass es ein Zeichenfolgenwert ist:

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

breadcrumbElementFrüher war es eine Zeichenfolge, aber aufgrund eines Refaktors war es ein Objekt geworden. Leider hat die Fehlermeldung von React nicht gut dazu beigetragen, mich auf die Zeile zu verweisen, in der das Problem bestand. Ich musste meinem Stack-Trace bis zum Ende folgen, bis ich erkannte, dass die "Requisiten" an eine Komponente übergeben wurden, und dann den fehlerhaften Code fand.

Sie müssen entweder auf eine Eigenschaft des Objekts verweisen, bei der es sich um einen Zeichenfolgenwert handelt, oder das Objekt in eine Zeichenfolgendarstellung konvertieren, die wünschenswert ist. Eine Option könnte seinJSON.stringify wenn Sie den Inhalt des Objekts tatsächlich sehen möchten.

Ich habe diesen Fehler erhalten, als ich versucht habe, die createdAtEigenschaft anzuzeigen, bei der es sich um ein Datumsobjekt handelt. Wenn Sie .toString()am Ende so verketten , wird die Konvertierung durchgeführt und der Fehler behoben. Posten Sie dies einfach als mögliche Antwort, falls jemand anderes auf dasselbe Problem stößt:

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

Ich habe nur den gleichen Fehler erhalten, aber aufgrund eines anderen Fehlers: Ich habe doppelte Klammern verwendet wie:

{{count}}

um den Wert von countanstelle des richtigen einzufügen :

{count}

in die sich der Compiler vermutlich verwandelt hat {{count: count}}, dh versucht, ein Objekt als React-Kind einzufügen.

Ich dachte nur, ich würde das ergänzen, da ich heute das gleiche Problem hatte. Es stellte sich heraus, dass es daran lag, dass ich nur die Funktion zurückgab, als ich sie in ein <div>Tag einwickelte , das wie unten zu funktionieren begann

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

Das Obige hat den Fehler verursacht. Ich habe das Problem behoben, indem ich den return()Abschnitt geändert habe in:

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

...oder einfach:

return gallerySection

Das untergeordnete Kind (Singular) sollte ein primitiver Datentyp sein, kein Objekt, oder es könnte ein JSX-Tag sein (was in unserem Fall nicht der Fall ist). . Verwenden Sie das Proptypes-Paket in der Entwicklung, um sicherzustellen, dass die Validierung erfolgt.

Nur ein kurzer Vergleich von Code-Snippets (JSX), um Sie mit einer Idee darzustellen:

1. Fehler: Wenn das Objekt an das Kind übergeben wird

   <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. Ohne Fehler: Wenn die Eigenschaft des Objekts ( die primitiv sein sollte, dh ein Zeichenfolgenwert oder ein ganzzahliger Wert ) an das untergeordnete Element übergeben wird.

   <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; (Aus der folgenden Quelle): Stellen Sie sicher, dass alle Elemente, die Sie in JSX rendern, Grundelemente und keine Objekte sind, wenn Sie React verwenden. Dieser Fehler tritt normalerweise auf, weil einer Funktion, die am Auslösen eines Ereignisses beteiligt ist, ein unerwarteter Objekttyp zugewiesen wurde (dh ein Objekt übergeben, wenn Sie eine Zeichenfolge übergeben sollten) oder ein Teil der JSX in Ihrer Komponente nicht auf ein Grundelement verweist (dh this.props) vs this.props.name).

Quelle - Kodierungbismuth.com

Meins hatte damit zu tun, unnötig geschweifte Klammern um eine Variable zu setzen, die ein HTML-Element in der return-Anweisung der Funktion render () enthält. Dies veranlasste React, es eher als Objekt als als Element zu behandeln.

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

  return (
    {element}
  )
}

Nachdem ich die geschweiften Klammern aus dem Element entfernt hatte, war der Fehler behoben und das Element wurde korrekt gerendert.

Meins hatte damit zu tun, die geschweiften Klammern um Requisiten zu vergessen, die an eine Präsentationskomponente gesendet wurden:

Vor:

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

Nach

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

Auch ich habe den Fehler "Objekte sind als untergeordnetes Element nicht gültig" erhalten, und für mich war die Ursache der Aufruf einer asynchronen Funktion in meinem JSX. Siehe unten.

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>
        );
    }
}

Ich habe gelernt, dass asynchrones Rendern in React nicht unterstützt wird. Das React-Team arbeitet an einer Lösung, wie hier dokumentiert .

Für alle, die Firebase mit Android verwenden, ist Android nur defekt. Meine iOS-Emulation ignoriert es.

Und wie oben von Apoorv Bankey gepostet.

Alles über Firebase V5.0.3 für Android, atm ist eine Pleite. Fix:

npm i --save firebase@5.0.3

Hier mehrfach bestätigt https://github.com/firebase/firebase-js-sdk/issues/871

Ich habe auch das gleiche Problem, aber mein Fehler ist so dumm. Ich habe versucht, direkt auf das Objekt zuzugreifen.

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>
        );
    }                                                                             

}

Wenn Sie aus irgendeinem Grund Firebase importiert haben. Versuchen Sie dann zu laufen npm i --save [email protected]. Dies liegt daran, dass die Firebase-Pause reaktionsnativ ist. Wenn Sie dies ausführen, wird dies behoben.

In meinem Fall habe ich vergessen, ein HTML-Element aus der Renderfunktion zurückzugeben, und ich habe ein Objekt zurückgegeben. Was ich getan habe, war, dass ich die {Elemente} einfach mit einem HTML-Element umwickelt habe - einem einfachen Div wie unten

<ul>{items}</ul>

Ich hatte das gleiche Problem, weil ich das nicht propsin die geschweiften Klammern gesteckt habe .

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

Wenn Ihr Code dem obigen ähnlich ist, wird dieser Fehler angezeigt. Um dies zu beheben, setzen Sie einfach geschweifte Klammern um die props.

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

Ich habe den gleichen Fehler bekommen, ich habe das geändert

export default withAlert(Alerts)

dazu

export default withAlert()(Alerts).

In älteren Versionen war der frühere Code in Ordnung, in späteren Versionen wird jedoch ein Fehler ausgegeben. Verwenden Sie daher den späteren Code, um den Fehler zu vermeiden.

In meinem Fall trat der Fehler auf, weil ich das Elementarray in geschweiften Klammern zurückgegeben habe, anstatt nur das Array selbst zurückzugeben.

Code mit Fehler

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

Richtiger Code

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

Sie haben nur die Schlüssel des Objekts anstelle des gesamten Objekts verwendet!

Weitere Details finden Sie hier: 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>

Ich habe das gleiche Problem, in meinem Fall aktualisiere ich den Redux Status und die neuen Datenparameter stimmen nicht mit den alten Parametern überein. Wenn ich also über diesen Fehler auf einige Parameter zugreifen möchte,

Vielleicht hilft diese Erfahrung jemandem

Wenn Sie Firebase verwenden und diesen Fehler sehen, sollten Sie überprüfen, ob Sie ihn richtig importieren. Ab Version 5.0.4 müssen Sie es folgendermaßen importieren:

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

Ja, ich weiß. Auch hier habe ich 45 Minuten verloren.

In der Regel wird dies angezeigt, weil Sie nicht richtig zerstören. Nehmen Sie diesen Code zum Beispiel:

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

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

Wir erklären es mit dem = text =>Parameter. Aber wirklich, React erwartet, dass dies ein allumfassendes propsObjekt ist.

Also sollten wir wirklich so etwas tun:

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

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

Beachten Sie den Unterschied? Der propsParameter hier könnte alles heißen (props ist nur die Konvention, die der Nomenklatur entspricht). React erwartet nur ein Objekt mit Schlüsseln und Werten.

Mit der Objektzerstörung können Sie Folgendes tun und werden es häufig sehen:

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

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

... was funktioniert.

Es besteht die Möglichkeit, dass jeder, der darauf stößt, versehentlich den Requisitenparameter seiner Komponente deklariert hat, ohne ihn zu zerstören.

Ich habe mich gerade einer wirklich dummen Version dieses Fehlers unterzogen, die ich hier auch für die Nachwelt teilen kann.

Ich hatte eine JSX wie diese:

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

Ich musste dies auskommentieren, um etwas zu debuggen. Ich habe die Tastenkombination in meiner IDE verwendet, was dazu führte:

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

Was natürlich ungültig ist - Objekte gelten nicht als reagierende Kinder!

Ich möchte dieser Liste eine weitere Lösung hinzufügen.

Technische Daten:

• "reagieren": "^ 16.2.0",
• "React-Dom": "^ 16.2.0",
• "React-Redux": "^ 5.0.6",
• "React-Scripts": "^ 1.0.17",
• "redux": "^ 3.7.2"

Ich habe den gleichen Fehler festgestellt:

Nicht erfasster Fehler: Objekte sind als untergeordnetes Element nicht gültig (gefunden: Objekt mit Schlüsseln {XXXXX}). Wenn Sie eine Sammlung von untergeordneten Elementen rendern möchten, verwenden Sie stattdessen ein Array.

Das war mein Code:

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

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

Lösung:

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

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

Das Problem trat auf, weil die Nutzlast den Artikel als Objekt sendete. Als ich die Nutzlastvariable entfernte und den userInput-Wert in den Versand einfügte, funktionierte alles wie erwartet.

Wenn Sie Firebase verwenden, eine der Dateien in Ihrem Projekt. Dann platzieren Sie einfach diese Import-Firebase-Anweisung am Ende !!

Ich weiß, das klingt verrückt, aber probier es aus !!

Mein Problem war einfach, als ich auf folgenden Fehler stieß:

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

Ich habe nur ein Objekt mit den im Fehler angegebenen Schlüsseln übergeben, während ich versucht habe, das Objekt direkt in einer Komponente mit {object} zu rendern, wobei ich erwartet habe, dass es eine Zeichenfolge ist

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

Beim Rendern auf einer React-Komponente habe ich etwas wie das Folgende verwendet

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

aber es hätte sein sollen

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

Wenn Sie zustandslose Komponenten verwenden, gehen Sie wie folgt vor:

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

Das schien für mich zu funktionieren

So etwas ist mir gerade passiert ...

Ich hab geschrieben:

{response.isDisplayOptions &&
{element}
}

Das Platzieren in einem Div hat es behoben:

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

Gefunden: Objekt mit Schlüsseln

Was bedeutet, dass Sie etwas übergeben, ist ein Schlüsselwert. Sie müssen also Ihren Handler ändern:

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

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

Du hast die Klammern verpasst ( {}).

In meinem Fall habe ich meiner untergeordneten Funktionskomponente eine asynchrone Funktion hinzugefügt und bin auf diesen Fehler gestoßen. Verwenden Sie Async nicht mit untergeordneter Komponente.

Wenn es bei Verwendung von Firebase nicht funktioniert, indem Sie das Ende von importAnweisungen einfügen, können Sie versuchen, dies in eine der Lebenszyklusmethoden einzufügen, dh Sie können es in diese einfügen componentWillMount().

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

Invariant Violation: Objects are not valid as a React childist mir passiert, als ich eine Komponente verwendet habe, die renderItemRequisiten benötigt , wie:

renderItem={this.renderItem}

und mein Fehler war, meine renderItemMethode zu machen async.

Mein Fehler war, weil ich es so geschrieben habe:

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

anstatt:

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

Es bedeutete, dass ich versuchte, ein Objekt anstelle des darin enthaltenen Werts zu rendern.

Bearbeiten: Dies ist für nicht native reagieren.