reactjs - 在反应中渲染firestore时间戳

问题描述

几个月来，我一直在尝试弄清楚如何在反应中显示 Firestore 时间戳。

2019 年 12 月，我在这篇文章中接受的解决方案奏效了。它不再起作用了。我又卡住了。

我有一个 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 频道中看到了一个讨论，即最近发布的 firebase 产生了一些意想不到的后果 - 有没有办法检查损坏的时间戳是否是其中之一？

当我尝试：

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

TypeError：无法读取未定义的属性“toDate”

当我尝试：

   {currentPost.createdAt.toDate()}

TypeError：无法读取未定义的属性“toDate”

当我尝试：

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

TypeError：无法读取未定义的属性“秒”

当我尝试时（我知道这行不通，但只是试图找到可能有助于解决此问题的见解）：

   {currentPost.createdAt}

错误：对象作为 React 子对象无效（发现：对象与键 {seconds, nanoseconds}）。如果您打算渲染一组子项，请改用数组。

我看过一些帖子说日期未定义，因为对 firebase 的调用尚未返回值，但是当我 console.log 整个 currentPost 时，我得到了 created At 的值，即：

创建时间：t 秒：1586495818 纳秒：888000000

看起来可疑的部分是“t”。它是否代表我为了访问时间戳而应该做的事情？有谁知道如何调查't'代表什么？

我看过这篇文章和这篇文章，并注意到它的每个答案都表明 .toDate() 扩展名应该有助于将 Firestore 时间戳转换为可以输出的东西。这些解决方案都不适用。

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

标签： reactjsfirebasegoogle-cloud-firestore

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

我将 useEffect 更改为 async - 如下。

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")}

手指越过这件作品超过几个月。

reactjs - 在反应中渲染firestore时间戳

问题描述

解决方案

推荐阅读