React - tampilkan cap waktu firestore

Saya mencoba mencari cara menampilkan cap waktu firestore di aplikasi reaksi.

Saya memiliki dokumen firestore dengan bidang bernama CreatedAt.

Saya mencoba memasukkannya dalam daftar output (mengekstraksi bit yang relevan di sini sehingga Anda tidak perlu membaca seluruh daftar bidang).

componentDidMount() {
    this.setState({ loading: true });

    this.unsubscribe = this.props.firebase
      .users()
      .onSnapshot(snapshot => {
        let users = [];

        snapshot.forEach(doc =>
          users.push({ ...doc.data(), uid: doc.id }),
        );

        this.setState({
          users,
          loading: false,
        });
      });
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    const { users, loading } = this.state;

    return (
        <div>
    {loading && <div>Loading ...</div>}

            {users.map(user => (

                <Paragraph key={user.uid}>  

       <key={user.uid}>  
       {user.email}
       {user.name}
       {user.createdAt.toDate()}
       {user.createdAt.toDate}
       {user.createdAt.toDate()).toDateString()}

Satu-satunya atribut yang tidak akan menyajikan adalah tanggal.

Setiap upaya di atas menghasilkan kesalahan yang mengatakan:

TypeError: Tidak dapat membaca properti 'toDate' dari undefined

Saya telah melihat posting ini , dan posting ini dan posting ini , dan posting ini dan lain-lain seperti mereka, yang menunjukkan todate bahwa () harus bekerja. Tetapi - ekstensi ini menimbulkan kesalahan bagi saya - termasuk ketika saya mencoba ekstensi toString.

Saya tahu ia tahu ada sesuatu di firestore karena ketika saya mencoba user.createdAt, saya mendapatkan pesan kesalahan ketika menemukan objek dengan detik di dalamnya.

Mengambil contoh dari Waelmas di bawah ini, saya mencoba mencatat output dari bidang sebagai:

this.db.collection('users').doc('HnH5TeCU1lUjeTqAYJ34ycjt78w22').get().then(function(doc) {
  console.log(doc.data().createdAt.toDate());

}

Saya juga mencoba menambahkan ini ke pernyataan peta saya tetapi mendapatkan kesalahan yang mengatakan user.get bukan fungsi.

{user.get().then(function(doc) {
                    console.log(doc.data().createdAt.toDate());}
                  )}

Ini menghasilkan pesan kesalahan yang sama seperti di atas.

PERIKSAAN BERIKUTNYA

Satu hal aneh yang muncul ketika mencoba menemukan cara untuk merekam tanggal di Firestore yang memungkinkan saya untuk kemudian membacanya kembali, adalah ketika saya mengubah handler kirim saya dalam satu bentuk untuk menggunakan formulasi ini:

handleCreate = (event) => {
    const { form } = this.formRef.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      };
    const payload = {
    name: values.name,
    // createdAt: this.fieldValue.Timestamp()
    // createdAt: this.props.firebase.fieldValue.serverTimestamp()

    }
    console.log("formvalues", payload);
    // console.log(_firebase.fieldValue.serverTimestamp());


    this.props.firebase
    .doCreateUserWithEmailAndPassword(values.email, values.password)
    .then(authUser => {
    return this.props.firebase.user(authUser.user.uid).set(
        {
          name: values.name,
          email: values.email,
          createdAt: new Date()
          // .toISOString()
          // createdAt: this.props.firebase.fieldValue.serverTimestamp()

        },
        { merge: true },
    );
    // console.log(this.props.firebase.fieldValue.serverTimestamp())
    })
    .then(() => {
      return this.props.firebase.doSendEmailVerification();
      })
    // .then(() => {message.success("Success") })
    .then(() => {
      this.setState({ ...initialValues });
      this.props.history.push(ROUTES.DASHBOARD);

    })


  });
  event.preventDefault();
    };

Itu berfungsi untuk merekam tanggal dalam database.

Bentuk entri firestore terlihat seperti ini:

Saya mencoba menampilkan tanggal di komponen ini:

class UserList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      users: [],
    };
  }

  componentDidMount() {
    this.setState({ loading: true });

    this.unsubscribe = this.props.firebase
      .users()
      .onSnapshot(snapshot => {
        let users = [];

        snapshot.forEach(doc =>
          users.push({ ...doc.data(), uid: doc.id }),
        );

        this.setState({
          users,
          loading: false,
        });
      });
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    const { users, loading } = this.state;

    return (
      <div>
          {loading && <div>Loading ...</div>}

          <List
            itemLayout="horizontal"
            dataSource={users}

            renderItem={item => (
              <List.Item key={item.uid}>
                <List.Item.Meta
                  title={item.name}
                  description={item.organisation}
                />
                  {item.email}
                  {item.createdAt}
                  {item.createdAt.toDate()}
                  {item.createdAt.toDate().toISOString()}

              </List.Item>
            // )
          )}
          />

      </div>
    );
  }
}

export default withFirebase(UserList);

Ketika saya mencoba membacanya kembali - menggunakan:

{item.email}

Pesan kesalahan berbunyi:

Kesalahan: Objek tidak valid sebagai anak Bereaksi (ditemukan: Stempel waktu (detik = 1576363035, nanodetik = 52000000)). Jika Anda bermaksud membuat koleksi anak-anak, gunakan array. dalam Item (di UserIndex.jsx: 74)

Ketika saya mencoba menggunakan setiap upaya ini:

{item.createdAt}
{item.createdAt.toDate()}
{item.createdAt.toDate().toISOString()}

Saya mendapatkan kesalahan yang mengatakan:

TypeError: Tidak dapat membaca properti 'toDate' dari undefined

Berdasarkan kemampuan untuk membaca kembali entri yang masuk dalam dokumen yang sama di bidang lain, saya berharap semua ini berfungsi untuk menghasilkan keluaran-bahkan jika tidak diformat seperti yang saya inginkan. Itu tidak terjadi.

PERIKSAAN BERIKUTNYA

Mengambil contoh Waelmas, saya mencoba mengikuti instruksi, tetapi di mana kita tidak mendapatkan respons yang sama adalah pada langkah pertama. Di mana Walemas mendapatkan output berdasarkan ekstensi .toDate (), saya mendapatkan pesan kesalahan mengatakan toDate () bukan fungsi.

Konsisten dengan dokumentasi Firebase, saya mencoba:

    const docRef = this.props.firebase.db.collection("users").doc("HnH5TeCU1lUjeTqAYJ34ycjt78w22");

docRef.get().then(function(docRef) {
    if (doc.exists) {
        console.log("Document createdAt:", docRef.createdAt.toDate());

}})

Ini menghasilkan serangkaian kesalahan dengan sintaks dan saya tidak dapat menemukan jalan keluarnya.

PERIKSAAN BERIKUTNYA

Saya kemudian mencoba membuat formulir baru untuk melihat apakah saya dapat menjelajahi ini tanpa aspek otentikasi dari formulir pengguna.

Saya memiliki formulir yang menerima input sebagai:

this.props.firebase.db.collection("insights").add({
            title: title,
            text: text,
            // createdAt1: new Date(),
            createdAt: this.props.firebase.fieldValue.serverTimestamp()
        })

Di mana dalam formulir sebelumnya, upaya Date () yang baru berfungsi untuk merekam tanggal dalam database, dalam contoh ini kedua bidang untuk CreatedAt dan CreatedAt1 menghasilkan entri basis data yang sama:

<div>{item.createdAt.toDate()}</div>
                    <div>{item.createdAt.toDate()}</div>

Saat saya mencoba menampilkan nilai tanggal, yang pertama menghasilkan kesalahan yang mengatakan:

Objek tidak valid sebagai anak Bereaksi (ditemukan: Minggu 15 Des 2019 21:33:32 GMT + 1100 (Waktu Siang Timur Australia)). Jika Anda bermaksud membuat koleksi anak-anak, gunakan array

Yang kedua menghasilkan kesalahan dengan mengatakan:

TypeError: Tidak dapat membaca properti 'toDate' dari undefined

Saya tidak dapat menemukan ide tentang apa yang harus dicoba selanjutnya.

Saya melihat posting ini yang menunjukkan bahwa hal berikut mungkin melakukan sesuatu yang bermanfaat:

                {item.createdAt1.Date.valueOf()}

Tidak. Itu membuat kesalahan yang mengatakan:

TypeError: Tidak dapat membaca properti 'Tanggal' yang tidak ditentukan

Posting ini tampaknya memiliki masalah yang sama dengan saya, tetapi tidak membahas bagaimana mereka berhasil menampilkan nilai tanggal yang mereka simpan.

Posting ini tampaknya terjebak pada pesan kesalahan array, tetapi tampaknya telah menemukan cara untuk menampilkan tanggal menggunakan CreatedAt.toDate ()

Setelah beberapa diskusi, kami menemukan bahwa perangko waktu pada objek pengguna OP dapat dirender seperti:

render() { 
const { users, loading } = this.state; 

return ( 
    <div> 
        {loading && <div>Loading ...</div>} 

        {users.map(user => ( 

            <Paragraph key={user.uid}> 

                <key={user.uid}> 
                    {user.email} 
                    {user.name} 
                    {new Date(user.createdAt.seconds * 1000).toLocaleDateString("en-US")}

Saya menciptakan kembali contoh Anda dalam proyek Dummy React, dan menerima kesalahan yang sama seperti yang diharapkan.

Kesalahan: Objek tidak valid sebagai anak Bereaksi

Saya bisa membuat ini di-render dengan benar dengan metode berikut, yang juga bisa digunakan untuk Anda:

{new Date(user.createdAt._seconds * 1000).toLocaleDateString("en-US")}

Yang, untuk stempel waktu sampel saya, diterjemahkan sebagai:

12/30/2019

Pastikan Anda menggunakan stempel waktu yang disimpan ke Firestore sebagai:

createdAt: this.props.firebase.Timestamp.fromDate(new Date())

Catatan: Ini dengan asumsi bahwa instance Anda firebase.firestore()adalah pada this.props.firebase. Dalam contoh lain Anda menggunakan this.props.firebase, tetapi metode tersebut terlihat seperti metode pembantu yang Anda buat sendiri.

Ketika nilai ini diambil, itu akan menjadi objek dengan dua properti - _secondsdan _nanoseconds.

Pastikan untuk memasukkan garis bawah. Jika Anda menggunakannya createdAt.secondstidak akan berhasil, itu harus createdAt._seconds.

Hal-hal lain yang saya coba:

user.createdAt.toDate()melempar toDate() is not a function.

user.createdAt melempar Error: Objects are not valid as a React child

new Date(user.createdAt._nanoseconds) menjadikan tanggal yang salah

Ketika Anda mendapatkan cap waktu dari Firestore, mereka berasal dari tipe berikut:

Untuk mengonversikan ini menjadi cap waktu normal, Anda dapat menggunakan fungsi .toDate ().

Misalnya, untuk dokumen seperti berikut:

Kita dapat menggunakan sesuatu seperti:

db.collection('[COLLECTION]').doc('[DOCUMENT]').get().then(function(doc) {
  console.log(doc.data().[FIELD].toDate());
});

dan hasilnya akan seperti:

2019-12-16T16:27:33.031Z

Sekarang untuk memproses stempel waktu lebih lanjut, Anda dapat mengubahnya menjadi string dan menggunakan regex untuk memodifikasinya sesuai dengan kebutuhan Anda.

Misalnya: (Saya menggunakan Node.js di sini)

db.collection('[COLLECTION]').doc('[DOCUMENT]').get().then(function(doc) {
  var stringified = doc.data().[FIELD].toDate().toISOString();
  //console.log(stringified);
  var split1 = stringified.split('T');
  var date = split1[0].replace(/\-/g, ' ');
  console.log(date);
  var time = split1[1].split('.');
  console.log(time[0]);
});

Akan memberikan Anda output seperti ini:

Jadi firestore menyimpan kurma sebagai objek dengan detik dan nanodetik. Jika Anda ingin waktu pengguna dibuat maka Anda akan referensi user.createdAt.nanoseconds. Ini mengembalikan cap waktu unix.

Bagaimana Anda ingin menampilkan tanggal di aplikasi Anda? Jika Anda ingin mendapatkan objek tanggal maka Anda dapat melewati timestamp ke konstruktor tanggal seperti itu new Date(user.createdAt.nanoseconds). Secara pribadi saya menikmati menggunakan perpustakaan tanggal-fns untuk menangani waktu.

Cara mengirim tanggal ke Firestore:

import firebase from 'firebase/app';

// ..........
// someObject is the object you're saving to your Firestore.

someObject.createdAt: firebase.firestore.Timestamp.fromDate(new Date())

Cara membacanya kembali:

function mapMonth(monthIndex) {
  const months = {
    0: 'jan',
    1: 'feb',
    2: 'mar',
    3: 'apr',
    4: 'may',
    5: 'jun',
    6: 'jul',
    7: 'aug',
    8: 'sep',
    9: 'oct',
    10: 'nov',
    11: 'dec'
  };
  return months[monthIndex];
}

// ..........
// Here you already read the object from Firestore and send its properties as props to this component.

return(
    <LS.PostDate_DIV>
      Published on {mapMonth(props.createdAt.toDate().getMonth()) + ' '}
      of {props.createdAt.toDate().getFullYear()}
    </LS.PostDate_DIV>
  );
}

Pada dasarnya ketika Anda melakukannya, createdAt.toDate()Anda mendapatkan objek Tanggal JS.

Saya menggunakannya seperti ini setiap saat!

Dari: https://cloud.google.com/firestore/docs/manage-data/add-data

Ini akan membuat data berdasarkan tanggal sistem pengguna. Jika Anda perlu memastikan bahwa semuanya akan disimpan secara kronologis (tanpa ada kesalahan tanggal sistem yang ditetapkan oleh sistem pengguna Anda) pada DB Anda, Anda harus menggunakan stempel waktu server. Tanggal akan ditetapkan menggunakan sistem tanggal internal DB Firestore Anda.

Dengan ID dokumen Pengguna yang memiliki createdAtproperti yang disetel, coba yang berikut ini:

const docRef = db.collection("users").doc("[docID]");

docRef.get().then(function(docRef) {
  if (docRef.exists) {
     console.log("user created at:", docRef.data().createdAt.toDate());
  }
})

Saya tidak perlu memanggil .data()metode sebelum mengakses properti dokumen

Perhatikan bahwa jika Anda mengakses docRef.data().createdAt.toDate()pengguna yang createdAthaknya tidak ditetapkan, Anda akan mendapatkannyaTypeError: Cannot read property 'toDate' of undefined

Jadi jika Anda memiliki pengguna dalam koleksi Anda yang tidak memiliki createdAtproperti yang ditentukan. Anda harus menerapkan logika untuk memeriksa apakah pengguna memiliki createdAtproperti sebelum mendapatkannya. Anda dapat melakukan sesuatu seperti ini:

//This code gets all the users and logs it's creation date in the console
docRef.get().then(function(docRef) {
  if (docRef.exists && docRef.data().createdAt) {
      console.log("User created at:", docRef.data().createdAt.toDate());
  }
})

Saya pernah mengalami masalah di masa lalu dengan properti objek bersarang tidak merender dengan benar dalam daftar item.somePropyang dianggap objek, tetapi item.someProp.someSubProptidak akan diselesaikan dengan nilai someSubPropin item.someProp.

Jadi untuk mengatasi masalah ini, mengapa tidak mengevaluasi Timestamp ke objek tanggal polos (atau format tampilan yang diinginkan) saat membuat objek pengguna?

this.unsubscribe = this.props.firebase
  .users()
  .onSnapshot(snapshot => {
    let users = [];

    snapshot.forEach(doc =>
      let docData = doc.data();
      docData.createdAt = docData.createdAt.toDate();
      users.push({ ...docData, uid: doc.id }),
    );

    this.setState({
      users,
      loading: false,
    });
  });