在React中呈现一个Firestore时间戳

9 浏览
0 Comments

在React中呈现一个Firestore时间戳

我已经试了几个月来找出如何在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文档中，看起来像这样：

enter image description here

当我悬停在日期上时，显示为'timestamp'。我可以根据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: 无法读取未定义的属性'seconds'

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

   {currentPost.createdAt}

Error: 对象不能作为React子元素（找到具有键{seconds，nanoseconds}的对象）。如果您想渲染一组子元素，请使用数组。

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

createdAt: t seconds: 1586495818 nanoseconds: 888000000

其中看起来可疑的是“t”。它代表了我应该做一些操作以访问时间戳吗？有人知道如何调查't'代表什么吗？

我看到了这个帖子和这个帖子，注意到对它的每个答案都建议使用.toDate()扩展来转换Firestore时间戳以输出。这些解决方案在这里都不起作用。

有人找到了一种当前的解决方案，可以同时保存和输出Firestore中的日期吗？

0

3 答案

0 Comments

问题原因：在React中渲染Firestore时间戳时，如果时间戳不存在会导致错误。

解决方法：

首先要检查时间戳是否存在，然后根据情况渲染不同的内容。

代码示例：

{data.time === undefined ? (
  
Time is not defined

) : (
  
{data.time.toDate().toLocaleTimeString("en-US")}

)}

以上是我的解决方案，希望能帮到你。

（这是我第一次回答问题，如果我有任何错误，请告诉我）

0
0 Comments

问题描述：在React中渲染Firestore的时间戳。

问题原因：Firestore的时间戳在React中无法直接渲染，需要进行处理。

解决方法：使用{data.timestamp.toDate().toLocaleTimeString("en-US")}来将Firestore的时间戳转换为可渲染的时间格式。

文章内容如下：

在React中渲染Firestore的时间戳是一个常见的需求。然而，Firestore的时间戳并不能直接在React中进行渲染。为了解决这个问题，我们需要进行一些处理。

经过尝试，以下方法可以解决这个问题：

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

上述代码将Firestore的时间戳转换为可渲染的时间格式。首先，我们使用toDate()方法将Firestore的时间戳转换为JavaScript的Date对象。然后，我们使用toLocaleTimeString("en-US")方法将Date对象转换为指定格式的时间字符串。

通过使用上述代码，我们可以在React中渲染Firestore的时间戳了。

希望本文对你在React中渲染Firestore的时间戳有所帮助！

0
0 Comments

在React中呈现Firestore时间戳的问题是由于以下原因引起的：在使用Firestore获取文档数据时，无法直接将时间戳渲染为日期格式。解决方法是将useEffect函数改为异步函数，并在渲染时使用new Date()将时间戳转换为日期格式。

代码示例：

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();
    }, []);
    return (
        {!loading && new Date(currentPost.createdAt.seconds * 1000).toLocaleDateString("en-US")}
    );
}

以上代码中，我们首先定义了一个ReadBlogPost组件，其中包含了一个名为currentPost的状态，用于存储从Firestore获取的数据。在useEffect函数中，我们使用async/await语法来获取文档数据，并将获取到的数据存储在currentPost状态中。在渲染时，我们使用new Date()将时间戳转换为日期格式，并使用toLocaleDateString方法将其格式化为指定的日期字符串。

通过上述解决方法，我们可以在React中正确呈现Firestore时间戳。

0