react · JavaScript
Le message
Objects are not valid as a React child (found: object with keys {name, id})
Ce que cela veut dire
La valeur que vous avez demandé à React d'afficher est un objet et non une chaîne ou un nombre, et la liste de clés entre parenthèses dit de quel objet il s'agit. En général la ligne devrait être {user.name} là où elle dit {user}, ou vous avez tenté d'afficher une réponse entière. Si vous voyez found: [object Promise] au lieu d'une liste de clés, la cause diffère : vous avez affiché le résultat d'une fonction async sans l'attendre. La solution est de choisir le champ à montrer ; JSON.stringify(user) convient pour un coup d'œil en débogage, mais ne le laissez pas à l'écran.
Le correctif
Pas de commande en une ligne ici. L’explication dit où regarder.
- Émis par
- react
- JavaScript
- 15
Les erreurs du navigateur et de Node disent d'ordinaire ce qui a cassé et non pourquoi la valeur est devenue telle — vous avez lu undefined, ce n'était pas une fonction, ce n'était pas du JSON — l'endroit à corriger se trouve donc en amont de la ligne qui a levé l'erreur, et faire taire cette seule ligne avec ?. et des valeurs par défaut fait revenir le même problème plus loin, sous une forme plus difficile à reconnaître.
Lire un message d’erreur
- Lisez à partir de la première ligne. Plus on descend, plus il s’agit des entrailles de l’outil ; la cause est généralement en haut.
- S’il y a un fichier et un numéro de ligne, commencez là — pas la première image de la pile, mais la ligne la plus haute qui nomme un fichier de vous.
- Cherchez le message tel quel, mais retirez d’abord vos chemins et vos noms de variables : c’est cela qui empêche la correspondance.
- La même situation se formule autrement selon la version de l’outil. Si les résultats sonnent faux, ajoutez le numéro de version.
- Avant de coller un correctif, vérifiez ce qu’il jette. Certains sont irréversibles.
Questions fréquentes
Q. Que veut dire « Objects are not valid as a React child (found: object with keys {name, id}) » ?
La valeur que vous avez demandé à React d'afficher est un objet et non une chaîne ou un nombre, et la liste de clés entre parenthèses dit de quel objet il s'agit. En général la ligne devrait être {user.name} là où elle dit {user}, ou vous avez tenté d'afficher une réponse entière. Si vous voyez found: [object Promise] au lieu d'une liste de clés, la cause diffère : vous avez affiché le résultat d'une fonction async sans l'attendre. La solution est de choisir le champ à montrer ; JSON.stringify(user) convient pour un coup d'œil en débogage, mais ne le laissez pas à l'écran.
Q. Comment le corriger ?
Pas de commande en une ligne. L’explication ci-dessus dit où regarder.
Q. Quel outil émet cela ?
react. Cela relève de JavaScript, et le message compte 14 mots.