几个月来我一直在尝试弄清楚如何在 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 保存和输出日期?
最佳答案
奇怪 - 我不明白这是为什么或如何工作,但确实如此。
我将 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")}
这个作品已经用了好几个月了。
关于reactjs - 在 React 中渲染一个 firestore 时间戳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61166977/