{"id":69994,"date":"2023-06-13T10:26:43","date_gmt":"2023-06-13T09:26:43","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=69994&post_type=knowledgebase&preview_id=69994"},"modified":"2025-10-01T20:42:44","modified_gmt":"2025-10-01T19:42:44","slug":"objects-are-not-valid-as-a-react-child","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/objects-are-not-valid-as-a-react-child\/","title":{"rendered":"Comment corriger l’erreur \u00ab Objects Are Not Valid as a React Child \u00bb"},"content":{"rendered":"

React est une biblioth\u00e8que JavaScript<\/a> populaire pour la construction d’interfaces utilisateur, largement utilis\u00e9e par les d\u00e9veloppeurs<\/a> du monde entier. Elle simplifie le processus de construction d’interfaces utilisateur complexes en fournissant des composants r\u00e9utilisables et une gestion des \u00e9tats.<\/p>\n

Que vous utilisiez React<\/a> en tant que d\u00e9butant ou d\u00e9veloppeur exp\u00e9riment\u00e9, il n’est pas rare de voir des messages d’erreur tels que \u00ab Objects Are Not Valid as a React Child \u00bb.<\/p>\n

Dans cet article, nous allons explorer les causes de cette erreur et fournir des solutions que vous pouvez utiliser pour la corriger.<\/p>\n

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

Quelles sont les causes de l’erreur \u00ab Objects Are Not Valid as a React Child \u00bb ?<\/h2>\n

L’erreur \u00ab Objects Are Not Valid as a React Child \u00bb est une erreur courante dans la programmation React. Elle se produit lorsqu’un composant re\u00e7oit un objet comme enfant au lieu d’un \u00e9l\u00e9ment React valide. Le message d’erreur ressemble g\u00e9n\u00e9ralement \u00e0 ceci :<\/p>\n

\"Erreur
Erreur \u00ab Objects Are Not Valid as a React Child \u00bb<\/figcaption><\/figure>\n

Le message d’erreur indique que le composant a re\u00e7u un objet au lieu d’un \u00e9l\u00e9ment enfant React valide (comme des cha\u00eenes de caract\u00e8res, des nombres ou des \u00e9l\u00e9ments React, mais pas des tableaux ou des objets). La cause principale de cette erreur est le passage d’un type de donn\u00e9es non valide et de donn\u00e9es non s\u00e9rialisables en tant qu’\u00e9l\u00e9ment enfant.<\/p>\n

1. Passer un objet en tant qu’\u00e9l\u00e9ment enfant<\/h3>\n
export default function App() {\n  return (\n    <div>\n      {{ message: \"Hello world!\" }}\n    <\/div>\n  );\n}<\/code><\/pre>\n
Dans cet exemple, le composant App<\/strong> tente de rendre un objet en tant qu’\u00e9l\u00e9ment enfant. Cela d\u00e9clenchera l’erreur \u00ab Objects Are Not Valid as a React Child \u00bb, car React ne reconna\u00eet pas les objets comme des \u00e9l\u00e9ments enfants valides.<\/p>\n
2. Transmettre des donn\u00e9es non s\u00e9rialisables en tant qu’\u00e9l\u00e9ment enfant<\/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
Dans le code ci-dessus, le composant App<\/strong> tente de rendre un type de donn\u00e9es non s\u00e9rialisable (un objet) en tant qu’\u00e9l\u00e9ment enfant. Cela d\u00e9clenche l’erreur \u00ab Objects Are Not Valid as a React Child \u00bb, car React exige que tous les \u00e9l\u00e9ments enfants soient s\u00e9rialisables.<\/p>\n
3. Passer un tableau comme \u00e9l\u00e9ment enfant<\/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
Dans ce code, nous avons un tableau students<\/code> et un objet locale<\/code> que nous essayons de rendre comme enfants. Cependant, passer un tableau ou un objet comme enfant n’est pas valide dans React – ce code d\u00e9clenchera l’erreur \u00ab Objects Are Not Valid as a React Child \u00bb.<\/p>\n
Comment corriger l’erreur \u00ab Objects Are Not Valid as a React Child \u00bb ?<\/h2>\n
Pour corriger cette erreur, il est important de se rappeler que les tableaux et les objets sont it\u00e9rables en JavaScript. JavaScript consid\u00e8re les tableaux comme un type d’objet sp\u00e9cial, c’est pourquoi le message d’erreur indiquera toujours \u00ab Objects Are Not Valid as a React Child \u00bb m\u00eame si le probl\u00e8me concerne un tableau.<\/p>\n
Pour acc\u00e9der aux donn\u00e9es d’un tableau ou d’un objet, vous pouvez it\u00e9rer dans le tableau \u00e0 l’aide d’une boucle, acc\u00e9der \u00e0 des \u00e9l\u00e9ments sp\u00e9cifiques en utilisant leur num\u00e9ro d’index ou utiliser la notation par points pour les objets.<\/p>\n
Voici quelques-unes des solutions les plus courantes :<\/p>\n
1. Conversion d’objets en cha\u00eenes de caract\u00e8res ou en nombres<\/h3>\n
Une fa\u00e7on de corriger l’erreur consiste \u00e0 convertir l’objet en cha\u00eene de caract\u00e8res ou en nombre avant de le transmettre en tant que fils. Par exemple, vous pouvez convertir l’objet en cha\u00eene ou en nombre avant de le passer en tant que fils :<\/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
Dans cet exemple, nous convertissons l’objet message<\/code> en cha\u00eene de caract\u00e8res \u00e0 l’aide de la m\u00e9thode JSON.stringify()<\/code> avant de le passer en tant qu’\u00e9l\u00e9ment enfant. Cela emp\u00eachera l’erreur \u00ab Objects Are Not Valid as a React Child \u00bb de se produire.<\/p>\n
2. Rendre correctement les tableaux avec la m\u00e9thode map()<\/h3>\n
Une autre cause fr\u00e9quente de l’erreur est l’utilisation incorrecte des tableaux dans React. Si vous essayez de rendre un tableau directement en tant qu’\u00e9l\u00e9ment enfant, vous d\u00e9clencherez l’erreur \u00ab Objects Are Not Valid as a React Child \u00bb.<\/p>\n
Vous devez plut\u00f4t utiliser la m\u00e9thode map()<\/code> pour convertir chaque \u00e9l\u00e9ment du tableau en un \u00e9l\u00e9ment enfant React valide.<\/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
Dans ce code, nous utilisons la m\u00e9thode map()<\/code> pour parcourir le tableau students<\/code> et convertir chaque \u00e9l\u00e9ment en un \u00e9l\u00e9ment div<\/code> contenant le nom et l’\u00e2ge de l’\u00e9l\u00e8ve. Nous ajoutons \u00e9galement une cl\u00e9 \u00e0 chaque \u00e9l\u00e9ment enfant pour optimiser les performances de rendu.<\/p>\n
3. Utilisation du rendu conditionnel pour \u00e9viter le rendu de types de donn\u00e9es non valides<\/h3>\n
Si vous transmettez des donn\u00e9es qui pourraient ne pas \u00eatre valides en tant qu’enfant React, vous pouvez utiliser le rendu conditionnel pour \u00e9viter que l’erreur ne se produise.<\/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
Dans cet exemple, nous utilisons le rendu conditionnel uniquement pour rendre le message s’il s’agit d’une cha\u00eene de caract\u00e8res. Cela emp\u00eachera l’erreur \u00ab Objects Are Not Valid as a React Child \u00bb de se produire.<\/p>\n
Bonnes pratiques pour \u00e9viter l’erreur \u00ab Objects Are Not Valid as a React Child \u00bb<\/h3>\n
Pour \u00e9viter que l’erreur \u00ab Objects Are Not Valid as a React Child \u00bb ne se produise, il est important de suivre les meilleures pratiques lors de la construction des composants React. Voici quelques-unes des meilleures pratiques<\/a> les plus importantes :<\/p>\n