React: Variabel mengacu pada Tanggal baru() tidak bisa menjadi elemen anak.

Dibuat pada 17 Okt 2016 · 3Komentar · Sumber: facebook/react

Saya mengikuti cuplikan kode dari buku React Quickly .
Dan saya tidak bisa menjalankan kode setelah dikompilasi melalui babel.
Kode saya seperti:

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

Pesan kesalahan yang dilaporkan oleh browser adalah:
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 .

Bisakah Anda membantu menjawab mengapa itu akan menyebabkan kesalahan?
Terima kasih banyak!

Apakah Anda ingin meminta _fitur_ atau melaporkan _bug_?

Apa perilaku saat ini?
pesan kesalahan: Pelanggaran Invarian Tidak Tertangkap: Objek tidak valid sebagai anak Bereaksi (ditemukan: Sen 17 Okt 2016 09:12:00 GMT+0800 (CST)). Jika Anda bermaksud merender koleksi anak-anak, gunakan array sebagai gantinya atau bungkus objek menggunakan createFragment(object) dari add-on React. Periksa metode render DateTimeNow .

Jika perilaku saat ini adalah bug, berikan langkah-langkah untuk mereproduksi dan jika mungkin demo minimal masalah melalui https://jsfiddle.net atau yang serupa (templat: https://jsfiddle.net/reactjs/69z2wepo/).

Apa perilaku yang diharapkan?
tag rentang menampilkan waktu saat ini
Versi React yang mana, dan browser/OS mana yang terpengaruh oleh masalah ini?
Bereaksi 15.3.2

Sumber

krave1986

Komentar yang paling membantu

Jawaban singkatnya adalah Anda perlu memanggil metode toString() pada variabel dateTimeNow Anda, karena ini adalah _objek_ tanggal, dan bukan string. yaitu salah satu 'Objek' yang dirujuk oleh pesan kesalahan.

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

Yang mengatakan, pesan kesalahan awalnya membingungkan karena hanya membuat tanggal sebagai string. Jika misalnya Anda mengganti {dateTimeNow} dengan objek seperti { {a: 1} } , pesan kesalahan sedikit lebih masuk akal:

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

colw pada 17 Okt 2016

👍5

Semua 3 komentar

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 pada 17 Okt 2016

👍5

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

Tanggal adalah objek di JS, tetapi output render Anda mungkin hanya berisi elemen React, string, dan angka. Memformat string dengan metode seperti toString() - akan berhasil.

Anda dapat menemukan daftar metode tersebut di MDN .

Bersulang!