React ist eine beliebte JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen, die von vielen Entwicklern auf der ganzen Welt genutzt wird. Sie vereinfacht die Erstellung komplexer Benutzeroberflächen, indem sie wiederverwendbare Komponenten und Zustandsverwaltung bietet.

Egal, ob du React als Anfänger oder als erfahrener Entwickler verwendest, es ist nicht ungewöhnlich, Fehlermeldungen wie „Objects Are Not Valid as a React Child“ zu sehen

In diesem Artikel gehen wir auf die Ursachen dieses Fehlers ein und stellen Lösungen vor, mit denen du ihn beheben kannst.

Was verursacht den Fehler „Objects Are Not Valid as a React Child“?

Der Fehler „Objects Are Not Valid as a React Child“ ist ein häufiger Fehler in der React-Programmierung. Er tritt auf, wenn eine Komponente ein Objekt als Child erhält und nicht ein gültiges React-Element. Die Fehlermeldung sieht normalerweise wie folgt aus:

Fehlermeldung
Fehlermeldung „Objects Are Not Valid as a React Child“

Die Fehlermeldung impliziert, dass die Komponente ein Objekt anstelle eines gültigen React-Child-Elements erhalten hat (z. B. Strings, Zahlen oder React-Elemente, aber keine Arrays oder Objekte). Die Hauptursache für diesen Fehler ist die Übergabe eines ungültigen Datentyps und nicht-serialisierbarer Daten als Child-Element.

1. Übergabe eines Objekts als Child-Element

export default function App() {
  return (
    <div>
      {{ message: "Hello world!" }}
    </div>
  );
}

In diesem Beispiel versucht die Anwendungs-Komponente, ein Objekt als Child-Element darzustellen. Dies führt zu der Fehlermeldung „Objects Are Not Valid as a React Child“, da React Objekte nicht als gültige Child-Elemente erkennt.

2. Nicht-serialisierbare Daten als Child übergeben

export default function App() {
  const message = { text: "Hello world!" };
  return (
    <div>
      {message}
    </div>
  );
}

In dem obigen Code versucht die Anwendungs-Komponente, einen nicht serialisierbaren Datentyp (ein Objekt) als Child-Element darzustellen. Dies führt zu der Fehlermeldung „Objects Are Not Valid as a React Child“, da React verlangt, dass alle Child-Elemente serialisierbar sind.

3. Übergabe eines Arrays als Child-Element

export default function App() {
    const students = [
        { name: 'John Doe', age: 12 },
        { name: 'Jane Doe', age: 14 },
    ];
    const locale = {
        state: 'Florida',
        country: 'USA',
    };
    return (
        <>
            <span>{students}</span>
            <div>{locale}</div>
        </>
    );
}

In diesem Code haben wir ein Array students und ein Objekt locale, die wir als Child-Elemente darstellen wollen. Die Übergabe eines Arrays oder Objekts als Child ist in React jedoch nicht zulässig – dieser Code löst den Fehler „Objects Are Not Valid as a React Child“ aus.

So behebst du den Fehler „Objects Are Not Valid as a React Child“

Um diesen Fehler zu beheben, ist es wichtig zu wissen, dass Arrays und Objekte in JavaScript iterierbar sind. JavaScript betrachtet Arrays als eine besondere Art von Objekten. Deshalb lautet die Fehlermeldung auch dann „Objects Are Not Valid as a React Child“, wenn es sich um ein Array handelt.

Um auf die Daten in einem Array oder Objekt zuzugreifen, kannst du das Array in einer Schleife durchlaufen, auf bestimmte Elemente über ihre Indexnummer zugreifen oder die Punktnotation für Objekte verwenden.

Hier sind einige der gängigsten Lösungen:

1. Objekte in Strings oder Zahlen umwandeln

Eine Möglichkeit, den Fehler zu beheben, besteht darin, das Objekt in eine Zeichenkette oder eine Zahl umzuwandeln, bevor du es als Child übergibst. Zum Beispiel:

export default function App() {
  const message = { text: "Hello world!" };
  return (
    <div>
      {JSON.stringify(message)}
    </div>
  );
}

In diesem Beispiel wandeln wir das Objekt message mit der Methode JSON.stringify() in einen String um, bevor wir es als Child-Element übergeben. Dadurch wird verhindert, dass der Fehler „Objects Are Not Valid as a React Child“ auftritt.

2. Richtiges Rendern von Arrays mit der map()-Methode

Eine weitere häufige Ursache für diesen Fehler ist die falsche Verwendung von Arrays in React. Wenn du versuchst, ein Array direkt als Child-Element darzustellen, löst du den Fehler „Objects Are Not Valid as a React Child“ aus.

Stattdessen solltest du die Methode map() verwenden, um jedes Element im Array in ein gültiges React Child-Element umzuwandeln.

export default function App() {
    const students = [
        { name: 'John Doe', age: 12 },
        { name: 'Jane Doe', age: 14 },
    ];
    const locale = {
        state: 'Florida',
        country: 'USA',
    };
    return (
        <>
            {students.map((student, index) => (
                <div key={index}>
                    <span>{student.name}</span>
                    <span>{student.age}</span>
                </div>
            ))}
            <div>
                {locale.state}, {locale.country}
            </div>
        </>
    );
}

In diesem Code verwenden wir die Methode map(), um über das Array students zu iterieren und jedes Element in ein div zu konvertieren, das den Namen und das Alter des Schülers enthält. Außerdem fügen wir jedem Child-Element einen Key Prop hinzu, um die Rendering-Leistung zu optimieren.

3. Verwendung von bedingtem Rendering zur Vermeidung von ungültigen Datentypen

Wenn du Daten übergibst, die als React-Child-Element ungültig sein könnten, kannst du das bedingte Rendering verwenden, um den Fehler zu vermeiden.

function App() {
  const message = { text: "Hello world!" };
  return (
    <div>
      {typeof message === 'string' ? message : null}
    </div>
  );
}

In diesem Beispiel verwenden wir das bedingte Rendering, um die Nachricht nur dann zu rendern, wenn sie ein String ist. So wird verhindert, dass der Fehler „Objects Are Not Valid as a React Child“ auftritt.

Best Practices zur Vermeidung des Fehlers „Objects Are Not Valid as a React Child“ (Objekte sind als React Child nicht gültig)

Um zu verhindern, dass der Fehler „Objects Are Not Valid as a React Child“ überhaupt auftritt, ist es wichtig, bei der Erstellung von React-Komponenten die Best Practices zu befolgen. Einige der wichtigsten Best Practices sind:

  • Übergib immer gültige React Child-Elemente als Children
  • Vermeide die Übergabe von nicht-serialisierbaren Daten als Child-Elemente
  • Verwende bedingtes Rendering, um Randfälle und ungültige Datentypen zu behandeln

Zusammenfassung

In diesem Artikel haben wir gelernt, wie man den Fehler „Objects Are Not Valid as a React Child“ in allen möglichen Szenarien lösen kann und welche Methoden am besten geeignet sind, um den Fehler zu vermeiden.

Es ist wichtig, sich daran zu erinnern, dass Arrays als ein spezieller Objekttyp gelten. Wenn du also ein Array nicht in einer Schleife durchläufst, bevor du es in deiner React-Anwendung renderst, wird der Fehler „Objects Are Not Valid as a React Child“ ausgelöst.

Wenn du eine React-Anwendung hast, die du mit der Welt teilen möchtest, solltest du dir die Anwendungs-Hosting-Dienste von Kinsta ansehen. Du kannst kostenlos loslegen.

Teile deine Erfahrungen! Hattest du dieses Problem schon einmal? Wenn ja, wie hast du es gelöst? Hast du eine andere Methode angewandt, die nicht in diesem Artikel beschrieben wurde? Lass es uns in den Kommentaren wissen.