React: A variável se refere a new Date () não pode ser um elemento filho.

Criado em 17 out. 2016 · 3Comentários · Fonte: facebook/react

Estou seguindo um trecho de código do livro React Quickly .
E eu não consigo executar o código depois de ser compilado via babel.
Meu código é 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')
);

A mensagem de erro relatada pelo navegador é:
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 .

Você poderia ajudar a responder por que isso causará erro?
Muito obrigado!

Você quer solicitar um _feature_ ou denunciar um _bug_?

Qual é o comportamento atual?
mensagem de erro: Violação invariável não capturada: Objetos não são válidos como filho do React (encontrado: Seg, 17 de outubro de 2016 09:12:00 GMT + 0800 (CST)). Se você pretende renderizar uma coleção de filhos, use uma matriz em vez disso ou envolva o objeto usando createFragment (objeto) dos complementos React. Verifique o método de renderização de DateTimeNow .

Se o comportamento atual for um bug, forneça as etapas para reproduzir e, se possível, uma demonstração mínima do problema via https://jsfiddle.net ou semelhante (modelo: https://jsfiddle.net/reactjs/69z2wepo/).

Qual é o comportamento esperado?
tag span exibe a hora atual
Quais versões do React e quais navegadores / sistemas operacionais são afetados por esse problema?
React 15.3.2

Fonte

krave1986

Comentários muito úteis

A resposta curta é que você precisa chamar um método toString() em sua variável dateTimeNow, pois é um _objeto_ de data, e não uma string. ou seja, um dos 'Objetos' aos quais a mensagem de erro se refere.

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

Dito isso, a mensagem de erro é inicialmente confusa, pois simplesmente exibe a data como uma string. Se, por exemplo, você substituir {dateTimeNow} por um objeto como { {a: 1} } , a mensagem de erro faz um pouco mais de sentido:

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

colw em 17 out. 2016

👍5

Todos 3 comentários

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 em 17 out. 2016

👍5

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

Datas são objetos em JS, mas sua saída de renderização pode conter apenas elementos, strings e números React. A formatação de uma string com qualquer método semelhante a toString() funcionará.

Você pode encontrar uma lista desses métodos no MDN .

Felicidades!