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

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

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

breadcrumbElement war früher eine Zeichenfolge, wurde aber aufgrund eines Refactors zu einem Objekt. Leider hat die Fehlermeldung von React keine gute Arbeit geleistet, wenn ich auf die Zeile aufmerksam wurde, in der das Problem bestand. Ich musste meinem Stack-Trace den ganzen Weg zurück nach oben folgen, bis ich erkannte, dass die "Requisiten" in eine Komponente übergeben wurden, und dann fand ich den fehlerhaften Code.

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

Ich habe diese Fehlermeldung erhalten, als ich versuchte, die createdAt -Eigenschaft anzuzeigen, die ein Date-Objekt ist. Wenn Sie .toString() am Ende so verketten, führt dies die Konvertierung durch und beseitigt den Fehler. Posten Sie dies einfach als mögliche Antwort, falls jemand anderes auf dasselbe Problem stößt:

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

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

{{count}}

um den Wert von count anstelle des korrekten einzufügen:

{count}

der Compiler vermutlich in {{count: count}} umgewandelt wurde, d. h. er versuchte, ein Objekt als untergeordnetes React einzufügen.

Ich dachte nur, ich würde dazu noch etwas hinzufügen, da ich heute dasselbe Problem hatte. Es stellte sich heraus, dass ich nur die Funktion zurückgegeben hatte, als ich sie in ein <div>-Tag einwickelte, das unten zu funktionieren begann

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

Das oben genannte hat den Fehler verursacht. Ich habe das Problem behoben, indem ich den Abschnitt return() folgendermaßen geändert habe:

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

...oder einfach:

return gallerySection

Meine hatte damit zu tun, dass unnötig geschweifte Klammern um eine Variable gesetzt wurden, die ein HTML-Element in der return-Anweisung der render () - Funktion enthält. Dies veranlasste React, es als Objekt und nicht 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 verschwunden und das Element wurde korrekt gerendert.

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

Vor:

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

Nach dem

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

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

Und wie von Apoorv Bankey oben geschrieben. 

Alles, was über Firebase V5.0.3 liegt, ist für Android eine Büste. Fix:

npm i --save [email protected]

Zahlreiche Male hier bestätigt https://github.com/firebase/firebase-js-sdk/issues/871

Kinder/Kinder reagieren sollte primitiv sein, nicht Objekt. Verwenden Sie das Proptypes-Paket in der Entwicklung, um sicherzustellen, dass die Validierung erfolgt.

Nur ein kurzer Code-Snippet (JSX) -Vergleich, um Sie mit der Idee darzustellen:

1. Fehler: Mit Objekt an Kind übergeben

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

2. Erfolg: Mit der Eigenschaft des Objekts (die primitiv sein sollte, d. H. Ein Zeichenfolgewert oder ein Ganzzahlwert), das 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}>
   --note the name property is primitive--->{item.name}</div>;
     })}
   </div>
   

TLDR; (Über den Link unten): Stellen Sie sicher, dass alle Elemente, die Sie in JSX rendern, Primitive und keine Objekte sind, wenn Sie React verwenden. Dieser Fehler tritt normalerweise auf, weil einer Funktion, die ein Ereignis auslöst, ein unerwarteter Objekttyp zugewiesen wurde (z. B. das Übergeben eines Objekts, wenn Sie einen String übergeben sollten) oder ein Teil der JSX in Ihrer Komponente kein primitives Element (z. B. this.props) referenziert vs this.props.name).

Quelle - https://www.codingbismuth.com/objects-are-not-valid-as-react-child/

Wenn Sie aus irgendeinem Grund Firebase importiert haben. Versuchen Sie dann, npm i --save [email protected] auszuführen. Dies ist darauf zurückzuführen, dass die Firebase reaktionsnativ bricht. 

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

}

So etwas ist mir gerade passiert ...

Ich hab geschrieben:

{response.isDisplayOptions &&
{element}
}

Platziere es in einem div:

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

Sie haben nur die Schlüssel des Objekts verwendet, anstatt das ganze Objekt!

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>

Mein Problem war einfach, als ich den folgenden Fehler sah:

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

ich habe nur ein Objekt mit im Fehler angegebenen Schlüsseln übergeben, als ich versuchte, das Objekt direkt in einer Komponente zu rendern. Dabei wurde {object} verwendet und erwartet, dass es sich um einen String handelt

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

beim Rendern einer React-Komponente habe ich etwas wie folgt verwendet

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

aber es hätte sein sollen

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

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

Specs:

• "reagieren": "^ 16.2.0",
• "reag-dom": "^ 16.2.0",
• "Reakt-Redux": "^ 5.0.6",
• "reagieren-Skripte": "^ 1.0.17",
• "redux": "^ 3.7.2"

Ich bin auf den gleichen Fehler gestoßen:

Nicht abgerufener Fehler: Objekte sind nicht als untergeordnetes Reakt gültig (gefunden: Objekt Mit Schlüsseln {XXXXX}). Wenn Sie eine Sammlung von Kindern rendern wollten, 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 Payload das Element als Objekt sendete. Wenn ich die Nutzlastvariable entfernte und den userInput-Wert in den Versand steckte, funktionierte alles wie erwartet.

Ich habe das gleiche Problem, in meinem Fall Ich aktualisiere den Zustand redux , und die neuen Datenparameter stimmten nicht mit den alten Parametern überein. Wenn ich also auf einige Parameter zugreifen möchte,

Vielleicht hilft diese Erfahrung jemandem 

Wenn Sie zustandslose Komponenten verwenden, gehen Sie folgendermaßen vor:

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

Das schien für mich zu funktionieren

Falls Sie mit Firebase eine der Dateien in Ihrem Projekt verwenden, dann legen Sie die import-Firebase-Anweisung am Ende !!

Ich weiß, das hört sich verrückt an, aber probiere es aus !!

Auch ich habe den Fehler "Objekte sind nicht als untergeordnetes Objekt reaktivierbar" erhalten, und für mich lag die Ursache darin, dass ich in meinem JSX eine asynchrone Funktion aufgerufen habe. 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 das asynchrone Rendern in React nicht unterstützt wird. Das React-Team arbeitet an einer Lösung wie hier dokumentiert.

Ken

Mein Problem war sehr speziell: In meine .env-Datei habe ich einen Kommentar in die Zeile mit meiner API-URL eingefügt:

API_URL=https://6ec1259f.ngrok.io #comment

Ich würde die Invariant violation-Fehlermeldung erhalten, wenn ich versuche, mich anzumelden, da die API-URL falsch war.

Ich habe diesen Fehler beim Rendern eines ternären Operators erhalten. Was ich getan habe:

render(){
  const bar = <div>asdfasdf</div>
  return ({this.state.foo ? {bar} : <div>blahblah</div>})
}

Es stellt sich heraus, dass es ohne die Klammern bar sein sollte, wie:

render(){
  const bar = <div>asdfasdf</div>
  return ({this.state.foo ? bar : <div>blahblah</div>})
}

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.

edit: das ist für nicht native reagieren.

In meinem Fall habe ich vergessen, ein HTML-Element aus der Renderfunktion zurückzugeben, und ich habe ein Objekt zurückgegeben. Was ich tat, war, dass ich die {items} mit einem HTML-Element umhüllte - ein einfaches div wie unten

<ul>{items}</ul>

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

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

Wenn Ihr Code dem obigen Code ähnlich ist, erhalten Sie diesen Fehler. Um dies zu beheben, setzen Sie einfach geschweifte Klammern um das props.

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

Invariant Violation: Objects are not valid as a React child ist mir bei der Verwendung einer Komponente passiert, die renderItem-Requisiten benötigt, wie zum Beispiel

renderItem={this.renderItem}

und mein Fehler war, meine renderItem-Methode async zu machen.

Offensichtlich kann, wie andere bereits in diesem Thread erwähnt haben, in React JSX props.childrennicht vom Typ Object sein. Dies ist NICHT die Grundursache für das Problem in Ihrer speziellen Frage.

Wenn Sie den Fehlertext sorgfältig lesen, werden Sie feststellen, dass React beim Rendern eines Objekts, das mit der Signatur einer SyntheticEvent übereinstimmt, den Fehler verursacht hat:

Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: object with keys {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Welcome.

Man wundert sich jedoch, warum Sie versuchen, eine SyntheticEvent zu rendern, und hier liegt die eigentliche Antwort auf Ihre Frage. Sie haben offensichtlich nicht die Absicht, eine SyntheticEvent zu rendern, aber Sie haben Ihre Event-Handler-Parameter in der falschen Reihenfolge .

In Ihrer render-Methode binden Sie die Ereignisbehandlungsroutine onItemClick an die this Ihrer Klassenkomponente und übergeben item als Argument:

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

Gemäß der Dokumentation für Function.prototype.bind , werden alle nach der thisArg übergebenen Argumente vorangestellt an alle Argumente übergeben, die später beim Aufruf der Zielfunktion übergeben werden :

arg1, arg2, ...

Argumente, die Argumenten vorangestellt werden sollen, die der gebundenen Funktion beim Aufrufen der Zielfunktion bereitgestellt werden.

Wenn wir uns dann die Ereignisbehandlungsroutine ansehen, sehen wir, dass der Parameter e vor dem Parameter item aufgeführt ist.

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

Wenn onItemClick(e, item) aufgerufen wird, wird die item, die während des Aufrufs von bind übergeben wurde, vorangestellt zur auslösenden event, sodass der Parameter e auf die zugeordnete und gebundene item und der Parameter item auf die event gesetzt werden. .

Wenn setState aufgerufen wird, wird lang auf die SyntheticEvent gesetzt, die das auslösende onClick -Ereignis darstellt, und wenn Sie versuchen, den Wert in this.state.lang an einer anderen Stelle zu rendern, wird der von Ihnen festgestellte Fehler "Invariant Violation" angezeigt.

In meinem Fall lag es an einem dynamischen Array, das zur Laufzeit injiziert werden musste.

Ich habe gerade die Nullprüfungen für Objekt hinzugefügt und es hat gut funktioniert.

Vorher:

...
render(
...
    <div> {props.data.roles[0]} </div>
...
);

Nach:

...
let items = (props && props.data && props.data.roles)? props.data.roles: [];
render(
...
    <div> {items[i]} </div>
...
);

Erstellen Sie einfach ein gültiges JSX-Element. In meinem Fall habe ich einem Objekt eine Komponente zugewiesen.

const AwesomeButtonComponent = () => <button>AwesomeButton</button>
const next = {
  link: "http://awesomeLink.com",
  text: "Awesome text",
  comp: AwesomeButtonComponent
}

An einer anderen Stelle in meinem Code wollte ich diese Schaltfläche dynamisch zuweisen.

return (
  <div>
    {next.comp ? next.comp : <DefaultAwesomeButtonComp/>}
  </div>
)

Ich löse dies, indem ich einen JSX-Comp deklariere, den ich über den Requisiten-Comp initialisiert habe.

const AwesomeBtnFromProps = next.comp
return (
  <div>
    {next.comp ? <AwesomeBtnFromProps/> : <DefaultAwesomeButtonComp/>}
  </div>
)

Firebase 2019

Wenn Sie Firebase verwenden und diesen Fehler sehen, sollten Sie prü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.

Für diejenigen, die Stringify() und toString() als Lösung erwähnten, werde ich sagen, dass dies für mich funktioniert hat, aber wir müssen das Problem verstehen und warum es aufgetreten ist. In meinem Code war es ein einfaches Problem. Ich hatte 2 Tasten, die dieselbe Funktion aufrufen, aber eine Taste hat das Argument nicht richtig an diese Funktion übergeben.

1. Die onClick-Funktion, die Sie implementieren möchten, wird sofort ausgeführt.

2. Da es sich bei unserem Code nicht um HTML handelt, handelt es sich um Javascript, daher wird es als Funktionsausführung interpretiert.

3. die onClick-Funktion nimmt eine Funktion als Argument und keine Funktionsausführung an.

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

dadurch wird eine OnClick-Funktion für Listenelement definiert, die nach dem Anklicken nicht ausgeführt wird, sobald unsere Komponente dargestellt wird.

Wenn Firebase verwendet wird, wenn es nicht funktioniert, indem import-Anweisungen am Ende stehen, können Sie versuchen, dies in eine der Lebenszyklusmethoden einzufügen, das heißt, Sie können es in componentWillMount() einfügen.

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

try{
    throw new Error(<p>An error occured</p>)
}catch(e){
    return (e)
}

Der obige Code hat den Fehler erzeugt, ich habe ihn dann folgendermaßen umgeschrieben:

try{
    throw(<p>An error occured</p>)
}catch(e){
    return (e)
}

Beachten Sie das Entfernen von new Error () im try-Block ...

Eine bessere Methode, um den Code zu schreiben, um diese Fehlermeldung zu vermeiden Erwartet, dass ein Objekt kein Wurf-Literal geworfen wird ist, eine Zeichenfolge an throw new Error () statt JSX zu übergeben und JSX zurückzugeben In Ihrem Fangblock etwa so:

try{
    throw new Error("An error occurred")
}catch(e){
    return (
        <p>{e.message}</p>
    )
}

Sie können das Array direkt im Text anzeigen. Entweder müssen Sie das Array markieren oder iterieren und in FlatList anzeigen

Zum Beispiel this.props.items = ["A", "B", "C"]

du musst anzeigen wie <Text>{JSON.strignify(this.props.items)}</Text>

oder

 <FlatList
    data={this.props.items}
    renderItem={(item)=>{
    <Text>{item}</Text>
    }}
     />

Ich habe mich gerade durch eine wirklich dumme Version dieses Fehlers gebracht, den ich hier für die Nachwelt ebenfalls teilen darf.

Ich hatte so etwas JSX:

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

Ich musste das kommentieren, um etwas zu debuggen. Ich habe die Tastenkombination in meiner IDE verwendet, was folgendes zur Folge hatte:

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

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

Gefunden: Objekt mit Schlüsseln

Das heißt, Sie übergeben etwas ist ein Schlüsselwert, so dass Sie Ihren Handler ändern müssen.

von

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

Zu

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

Du hast die geschweiften Klammern verpasst ({}).