reactjs - 在 React 中渲染一个 firestore 时间戳

Question

几个月来我一直在尝试弄清楚如何在 React 中显示 firestore 时间戳。

2019 年 12 月，我在这个 post 上接受的解决方案工作了。它不再有效。我又卡住了。

我有一个 firebase.js 助手来记录日期:

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


  }

我在表单中使用该助手来记录创建条目的日期，如下所示:

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

正确地将日期保存到如下所示的 firestore 文档中:

当我将鼠标悬停在日期上时，它会显示“时间戳”。我可以通过引用 createdAt 日期来对从 firestore 返回的数据进行排序 - 所以奇怪的是，时间戳可以用于对文档进行排序，但不能用于在屏幕上打印日期。

当谈到输出日期时，我又回到了我在上一篇文章中报告的所有相同错误 - 但在 12 月工作的解决方案不再有效。我在 firebase slack channel 中看到一个讨论，最近发布的 firebase 产生了一些意想不到的后果 - 有什么方法可以检查损坏的时间戳是否是其中之一？

当我尝试时:

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

TypeError: Cannot read property 'toDate' of undefined

当我尝试时:

   {currentPost.createdAt.toDate()}

TypeError: Cannot read property 'toDate' of undefined

当我尝试时:

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

类型错误:无法读取未定义的属性“秒”

当我尝试时(我知道这行不通，但只是想找到可能有助于解决此问题的见解):

   {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.

我看过一些posts它说日期是未定义的，因为对 firebase 的调用还没有返回值，但是当我 console.log 整个 currentPost 时，我得到一个创建的值，它是:

createdAt: t seconds: 1586495818 nanoseconds: 888000000

其中看起来可疑的部分是“t”。它是否代表我应该做些什么才能访问时间戳？有谁知道如何调查“t”代表什么？

我看过this post和 this post ，并注意它的每个答案都表明 .toDate() 扩展应该有助于将 firestore 时间戳转换为可以输出的内容。这些解决方案均不适用于此。

有没有人想出一个当前的解决方案，允许从 firestore 保存和输出日期？

Answer 1

奇怪 - 我不明白这是为什么或如何工作，但确实如此。

我将 useEffect 更改为异步 - 如下所示。

function ReadBlogPost () {
    const [loading, setLoading] = useState(true);
    const [currentPost, setCurrentPost] = useState({});
    let { slug } = useParams();


    useEffect(() => {

        const fetchData = async() => {

            try {

                const response = await Firebase.firestore
                    .collection("blog")
                    .doc(slug)
                    .get();

                console.log('response', response);

                let data = { title: 'not found' };

                if (response.exists) {
                    data = response.data();
                }

                setCurrentPost(data);
                setLoading(false);

            } catch(err) {
                console.error(err);
            }

        };

        fetchData();

    }, []);

然后在渲染中，我可以使用:

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

这个作品已经用了好几个月了。