{"id":62810,"date":"2023-06-13T10:26:38","date_gmt":"2023-06-13T09:26:38","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=62810&post_type=knowledgebase&preview_id=62810"},"modified":"2025-10-01T20:15:33","modified_gmt":"2025-10-01T19:15:33","slug":"objects-are-not-valid-as-a-react-child","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/objects-are-not-valid-as-a-react-child\/","title":{"rendered":"So behebst du den Fehler „Objects Are Not Valid as a React Child“"},"content":{"rendered":"

React ist eine beliebte JavaScript<\/a>-Bibliothek f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen, die von vielen Entwicklern<\/a> auf der ganzen Welt genutzt wird. Sie vereinfacht die Erstellung komplexer Benutzeroberfl\u00e4chen, indem sie wiederverwendbare Komponenten und Zustandsverwaltung bietet.<\/p>\n

Egal, ob du React<\/a> als Anf\u00e4nger oder als erfahrener Entwickler verwendest, es ist nicht ungew\u00f6hnlich, Fehlermeldungen wie „Objects Are Not Valid as a React Child“ zu sehen<\/p>\n

In diesem Artikel gehen wir auf die Ursachen dieses Fehlers ein und stellen L\u00f6sungen vor, mit denen du ihn beheben kannst.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Was verursacht den Fehler „Objects Are Not Valid as a React Child“?<\/h2>\n

Der Fehler „Objects Are Not Valid as a React Child“ ist ein h\u00e4ufiger Fehler in der React-Programmierung. Er tritt auf, wenn eine Komponente ein Objekt als Child erh\u00e4lt und nicht ein g\u00fcltiges React-Element. Die Fehlermeldung sieht normalerweise wie folgt aus:<\/p>\n

\"Fehlermeldung
Fehlermeldung „Objects Are Not Valid as a React Child“<\/figcaption><\/figure>\n

Die Fehlermeldung impliziert, dass die Komponente ein Objekt anstelle eines g\u00fcltigen React-Child-Elements erhalten hat (z. B. Strings, Zahlen oder React-Elemente, aber keine Arrays oder Objekte). Die Hauptursache f\u00fcr diesen Fehler ist die \u00dcbergabe eines ung\u00fcltigen Datentyps und nicht-serialisierbarer Daten als Child-Element.<\/p>\n

1. \u00dcbergabe eines Objekts als Child-Element<\/h3>\n
export default function App() {\n  return (\n    <div>\n      {{ message: \"Hello world!\" }}\n    <\/div>\n  );\n}<\/code><\/pre>\n
In diesem Beispiel versucht die Anwendungs<\/strong>-Komponente, ein Objekt als Child-Element darzustellen. Dies f\u00fchrt zu der Fehlermeldung „Objects Are Not Valid as a React Child“, da React Objekte nicht als g\u00fcltige Child-Elemente erkennt.<\/p>\n
2. Nicht-serialisierbare Daten als Child \u00fcbergeben<\/h3>\n
export default function App() {\n  const message = { text: \"Hello world!\" };\n  return (\n    <div>\n      {message}\n    <\/div>\n  );\n}<\/code><\/pre>\n
In dem obigen Code versucht die Anwendungs<\/strong>-Komponente, einen nicht serialisierbaren Datentyp (ein Objekt) als Child-Element darzustellen. Dies f\u00fchrt zu der Fehlermeldung „Objects Are Not Valid as a React Child“, da React verlangt, dass alle Child-Elemente serialisierbar sind.<\/p>\n
3. \u00dcbergabe eines Arrays als Child-Element<\/h3>\n
export default function App() {\n    const students = [\n        { name: 'John Doe', age: 12 },\n        { name: 'Jane Doe', age: 14 },\n    ];\n    const locale = {\n        state: 'Florida',\n        country: 'USA',\n    };\n    return (\n        <>\n            <span>{students}<\/span>\n            <div>{locale}<\/div>\n        <\/>\n    );\n}<\/code><\/pre>\n
In diesem Code haben wir ein Array students<\/code> und ein Objekt locale<\/code>, die wir als Child-Elemente darstellen wollen. Die \u00dcbergabe eines Arrays oder Objekts als Child ist in React jedoch nicht zul\u00e4ssig – dieser Code l\u00f6st den Fehler „Objects Are Not Valid as a React Child“ aus.<\/p>\n
So behebst du den Fehler „Objects Are Not Valid as a React Child“<\/h2>\n
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.<\/p>\n
Um auf die Daten in einem Array oder Objekt zuzugreifen, kannst du das Array in einer Schleife durchlaufen, auf bestimmte Elemente \u00fcber ihre Indexnummer zugreifen oder die Punktnotation f\u00fcr Objekte verwenden.<\/p>\n
Hier sind einige der g\u00e4ngigsten L\u00f6sungen:<\/p>\n
1. Objekte in Strings oder Zahlen umwandeln<\/h3>\n
Eine M\u00f6glichkeit, den Fehler zu beheben, besteht darin, das Objekt in eine Zeichenkette oder eine Zahl umzuwandeln, bevor du es als Child \u00fcbergibst. Zum Beispiel:<\/p>\n
export default function App() {\n  const message = { text: \"Hello world!\" };\n  return (\n    <div>\n      {JSON.stringify(message)}\n    <\/div>\n  );\n}<\/code><\/pre>\n
In diesem Beispiel wandeln wir das Objekt message<\/code> mit der Methode JSON.stringify()<\/code> in einen String um, bevor wir es als Child-Element \u00fcbergeben. Dadurch wird verhindert, dass der Fehler „Objects Are Not Valid as a React Child“ auftritt.<\/p>\n
2. Richtiges Rendern von Arrays mit der map()-Methode<\/h3>\n
Eine weitere h\u00e4ufige Ursache f\u00fcr diesen Fehler ist die falsche Verwendung von Arrays in React. Wenn du versuchst, ein Array direkt als Child-Element darzustellen, l\u00f6st du den Fehler „Objects Are Not Valid as a React Child“ aus.<\/p>\n
Stattdessen solltest du die Methode map()<\/code> verwenden, um jedes Element im Array in ein g\u00fcltiges React Child-Element umzuwandeln.<\/p>\n
export default function App() {\n    const students = [\n        { name: 'John Doe', age: 12 },\n        { name: 'Jane Doe', age: 14 },\n    ];\n    const locale = {\n        state: 'Florida',\n        country: 'USA',\n    };\n    return (\n        <>\n            {students.map((student, index) => (\n                <div key={index}>\n                    <span>{student.name}<\/span>\n                    <span>{student.age}<\/span>\n                <\/div>\n            ))}\n            <div>\n                {locale.state}, {locale.country}\n            <\/div>\n        <\/>\n    );\n}<\/code><\/pre>\n
In diesem Code verwenden wir die Methode map()<\/code>, um \u00fcber das Array students<\/code> zu iterieren und jedes Element in ein div<\/code> zu konvertieren, das den Namen und das Alter des Sch\u00fclers enth\u00e4lt. Au\u00dferdem f\u00fcgen wir jedem Child-Element einen Key Prop hinzu, um die Rendering-Leistung zu optimieren.<\/p>\n
3. Verwendung von bedingtem Rendering zur Vermeidung von ung\u00fcltigen Datentypen<\/h3>\n
Wenn du Daten \u00fcbergibst, die als React-Child-Element ung\u00fcltig sein k\u00f6nnten, kannst du das bedingte Rendering verwenden, um den Fehler zu vermeiden.<\/p>\n
function App() {\n  const message = { text: \"Hello world!\" };\n  return (\n    <div>\n      {typeof message === 'string' ? message : null}\n    <\/div>\n  );\n}<\/code><\/pre>\n
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.<\/p>\n
Best Practices zur Vermeidung des Fehlers „Objects Are Not Valid as a React Child“ (Objekte sind als React Child nicht g\u00fcltig)<\/h3>\n
Um zu verhindern, dass der Fehler „Objects Are Not Valid as a React Child“ \u00fcberhaupt auftritt, ist es wichtig, bei der Erstellung von React-Komponenten die Best Practices zu befolgen. Einige der wichtigsten Best Practices<\/a> sind:<\/p>\n