在 React 中渲染一个 firestore 时间戳

Question

几个月来，我一直在尝试弄清楚如何在 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;


  }

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

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

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

当我 hover 超过日期时，它显示“时间戳”。 我可以通过参考 createdAt 日期来排序从 firestore 返回的数据——所以奇怪的是，时间戳可以用来对文档进行排序，但不能用来在屏幕上打印日期。

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

当我尝试时：

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

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

当我尝试时：

   {currentPost.createdAt.toDate()}

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

当我尝试时：

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

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

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

   {currentPost.createdAt}

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

我面临着同样的问题。 解决方案对我来说很简单，您必须首先检查时间戳是否存在。

   {data.time === undefined ? (
      <div>Time is not defined</div>
        ) : (
      <div> {data.time.toDate().toLocaleTimeString("en-US")}</div>
        )}

之后，您可以为所欲为。 （第一次回答任何问题，如果我犯了任何错误，请告诉）

Answer 3

这对我有用：

{data.timestamp.toDate().toLocaleTimeString("en-US")} // US format