React: La variable se refiere a la nueva fecha () no puede ser un elemento secundario.

Creado en 17 oct. 2016 · 3Comentarios · Fuente: facebook/react

Estoy siguiendo un fragmento de código del libro React Quickly .
Y no puedo ejecutar el código después de haber sido compilado a través de babel.
Mi código es como:

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')
);

El mensaje de error informado por el navegador es:
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 DateTimeNow .

¿Podría ayudarme a responder por qué causará un error?
¡Muchos gracias!

¿Quieres solicitar una _ función_ o informar de un _ error_?

¿Cuál es el comportamiento actual?
mensaje de error: Violación invariante no detectada: los objetos no son válidos como hijo de React (encontrado: lunes 17 de octubre de 2016 09:12:00 GMT + 0800 (CST)). Si pretendía representar una colección de niños, use una matriz en su lugar o envuelva el objeto usando createFragment (objeto) de los complementos de React. Verifique el método de renderizado de DateTimeNow .

Si el comportamiento actual es un error, proporcione los pasos para reproducir y, si es posible, una demostración mínima del problema a través de https://jsfiddle.net o similar (plantilla: https://jsfiddle.net/reactjs/69z2wepo/).

¿Cuál es el comportamiento esperado?
la etiqueta de intervalo muestra la hora actual
¿Qué versiones de React y qué navegador / sistema operativo se ven afectados por este problema?
Reaccionar 15.3.2

Fuente

krave1986

Comentario más útil

La respuesta corta es que necesita llamar a un método toString() en su variable dateTimeNow, ya que es un objeto de fecha y no una cadena. es decir, uno de los 'Objetos' a los que se refiere el mensaje de error.

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

Dicho esto, el mensaje de error es inicialmente confuso, ya que simplemente muestra la fecha como una cadena. Si, por ejemplo, reemplaza {dateTimeNow} con un objeto como { {a: 1} } , el mensaje de error tiene un poco más de sentido:

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

colw en 17 oct. 2016

👍5

Todos 3 comentarios

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 en 17 oct. 2016

👍5

https://github.com/facebook/react/issues/7988#issuecomment -254148427 es correcto.

Las fechas son objetos en JS, pero la salida de tu render solo puede contener elementos, cadenas y números de React. Dar formato a una cadena con cualquier método similar a toString() funcionará.

Puede encontrar una lista de dichos métodos en MDN .

¡Salud!