React: La variable fait référence à la nouvelle Date() ne peut pas être un élément enfant.

Créé le 17 oct. 2016 · 3Commentaires · Source: facebook/react

Je suis un extrait de code du livre React Quickly .
Et je ne peux pas exécuter le code après avoir été compilé via babel.
Mon code est comme :

class DateTimeNow extends React.Component{
    render(){
        let dateTimeNow = new Date();
        return <span>Current date and time is {dateTimeNow}.</span>;
    }
}
ReactDOM.render(
    <DateTimeNow/>,
    document.getElementById('content')
);

Le message d'erreur signalé par le navigateur est :
Uncaught Invariant Violation: Objects are not valid as a React child (found: Mon Oct 17 2016 09:12:00 GMT+0800 (CST)). 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 DateHeureMaintenant .

Pourriez-vous s'il vous plaît aider à répondre pourquoi cela provoquera une erreur?
Merci beaucoup!

Voulez-vous demander une _fonctionnalité_ ou signaler un _bug_ ?

Quel est le comportement actuel ?
message d'erreur : Violation invariante non détectée : les objets ne sont pas valides en tant qu'enfant React (trouvé : 17 octobre 2016 09:12:00 GMT+0800 (CST)). Si vous vouliez restituer une collection d'enfants, utilisez plutôt un tableau ou enveloppez l'objet à l'aide de createFragment(object) à partir des modules complémentaires React. Vérifiez la méthode de rendu de DateTimeNow .

Si le comportement actuel est un bogue, veuillez fournir les étapes à reproduire et si possible une démo minimale du problème via https://jsfiddle.net ou similaire (modèle : https://jsfiddle.net/reactjs/69z2wepo/).

Quel est le comportement attendu ?
la balise span affiche l'heure actuelle
Quelles versions de React, et quel navigateur/OS sont concernés par ce problème ?
Réagir 15.3.2

Source

krave1986

Commentaire le plus utile

La réponse courte est que vous devez appeler une méthode toString() sur votre variable dateTimeNow, car il s'agit d'un _objet_ de date et non d'une chaîne. c'est-à-dire l'un des « Objets » auxquels le message d'erreur fait référence.

return <span>Current date and time is {dateTimeNow.toUTCString()}.</span>;

Cela dit, le message d'erreur est d'abord déroutant car il affiche simplement la date sous forme de chaîne. Si par exemple vous remplacez {dateTimeNow} par un objet tel que { {a: 1} } , le message d'erreur a un peu plus de sens :

Uncaught Error: Objects are not valid as a React child (found: object with keys {a}).

colw le 17 oct. 2016

👍5

Tous les 3 commentaires

return <span>Current date and time is {dateTimeNow.toUTCString()}.</span>;

Uncaught Error: Objects are not valid as a React child (found: object with keys {a}).

colw le 17 oct. 2016

👍5

https://github.com/facebook/react/issues/7988#issuecomment -254148427 est correct.

Les dates sont des objets dans JS, mais votre sortie de rendu ne peut contenir que des éléments, des chaînes et des nombres React. Le formatage d'une chaîne avec n'importe quelle méthode de type toString() fonctionnera.

Vous pouvez trouver une liste de ces méthodes sur MDN .

Acclamations!