Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

reactjs - Rendering a firestore timestamp in react

I have been trying for months to figure out how to display a firestore timestamp in react.

In December 2019, the solution I accepted on this post worked. It no longer works. I'm back to stuck.

I have a firebase.js helper to record dates with:

class Firebase {
  constructor() {
    app.initializeApp(config)
    this.firestore = app.firestore();
    this.auth = app.auth();
    this.serverTimestamp = app.firestore.FieldValue.serverTimestamp;


  }

I use that helper in forms to record the date an entry is created like so:

  await Firebase.firestore.collection("blog").doc().set({ 
    title: values.title,    
    createdAt: Firebase.serverTimestamp()

That correctly saves a date into the firestore document that looks like this:

enter image description here

When I hover over the date, it shows 'timestamp'. I am able to order the data returned from firestore by reference to the createdAt date - so it's curious that the timestamp can be used to sort the documents but cannot be used to print the date on the screen.

When it then comes to outputting the date, I am back to getting all the same errors I reported in the previous post - but the solution that worked in December, no longer works. I have seen a discussion in the firebase slack channel that a recent release of firebase has had some unintended consequences - is there any way to check if broken timestamps is one of them?

When I try:

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

TypeError: Cannot read property 'toDate' of undefined

When I try:

   {currentPost.createdAt.toDate()}

TypeError: Cannot read property 'toDate' of undefined

When I try:

   {new Date(currentPost.createdAt.seconds * 1000).toLocaleDateString("en-US")}

TypeError: Cannot read property 'seconds' of undefined

When I try (I know this won't work but just trying to find insights that might help solve this problem):

   {currentPost.createdAt}

Error: Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead.

I have seen some posts which say the date is undefined because the call on firebase hasn't returned a value yet, but when I console.log the whole currentPost, I get a value for created At, which is:

createdAt: t seconds: 1586495818 nanoseconds: 888000000

The part of this that looks suspicious is the "t". Does it represent something that I'm supposed to do something with in order to access the timestamp? Does anyone know how to investigate what the 't' represents?

I have seen this post and this post, and note that each of the answers to it suggest that the .toDate() extension should help to convert a firestore timestamp to something that can be output. None of those solutions work here.

Has anyone figured out a current solution that allows to both save and output a date from firestore?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...