在react中呈现 Firestore 时间戳

IT技术 reactjs firebase google-cloud-firestore
2021-05-09 22:07:05

几个月来，我一直试图弄清楚如何在react中显示 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()}

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

当我尝试：

   {currentPost.createdAt.toDate()}

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

当我尝试：

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

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

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

   {currentPost.createdAt}

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

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

createdAt: t 秒: 1586495818 纳秒: 888000000

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

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

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

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

手指越过这项工作超过几个月。

其它你可能感兴趣的问题
上一篇如何使用 Jest 测试异步组件？ 下一篇ReactJS 无法访问“this”方法