我正在尝试弄清楚如何在 React 应用程序中显示 Firestore 时间戳。
我有一个 firestore 文档，其中包含一个名为createdAt 的字段。
我试图将其包含在输出列表中(在此处提取相关位，以便您不必阅读整个字段列表)。
componentDidMount() {
this.setState({ loading: true });
this.unsubscribe = this.props.firebase
.users()
.onSnapshot(snapshot => {
let users = [];
snapshot.forEach(doc =>
users.push({ ...doc.data(), uid: doc.id }),
);
this.setState({
users,
loading: false,
});
});
}
componentWillUnmount() {
this.unsubscribe();
}
render() {
const { users, loading } = this.state;
return (
<div>
{loading && <div>Loading ...</div>}
{users.map(user => (
<Paragraph key={user.uid}>
<key={user.uid}>
{user.email}
{user.name}
{user.createdAt.toDate()}
{user.createdAt.toDate}
{user.createdAt.toDate()).toDateString()}
唯一不会呈现的属性是日期。
上述每次尝试都会生成一个错误，内容如下:
TypeError: Cannot read property 'toDate' of undefined
我见过this post ，和this post和this post ，和this post和其他类似的人，这表明 toDate() 应该可以工作。但是 - 这个扩展给我带来了一个错误 - 包括当我尝试 toString 扩展时。
我知道它知道 firestore 中有东西，因为当我尝试 user.createdAt 时，我收到一条错误消息，说它找到了一个包含秒数的对象。
以下面 Waelmas 的示例为例，我尝试将字段的输出记录为:
this.db.collection('users').doc('HnH5TeCU1lUjeTqAYJ34ycjt78w22').get().then(function(doc) {
console.log(doc.data().createdAt.toDate());
}
我还尝试将其添加到我的 map 语句中，但收到错误消息，指出 user.get 不是函数。
{user.get().then(function(doc) {
console.log(doc.data().createdAt.toDate());}
)}
它生成与上面相同的错误消息。
下一次尝试
在试图找到一种在 Firestore 中记录日期并允许我读回的方法时，出现了一件奇怪的事情，那就是当我以一种形式更改提交处理程序以使用此公式时:
handleCreate = (event) => {
const { form } = this.formRef.props;
form.validateFields((err, values) => {
if (err) {
return;
};
const payload = {
name: values.name,
// createdAt: this.fieldValue.Timestamp()
// createdAt: this.props.firebase.fieldValue.serverTimestamp()
}
console.log("formvalues", payload);
// console.log(_firebase.fieldValue.serverTimestamp());
this.props.firebase
.doCreateUserWithEmailAndPassword(values.email, values.password)
.then(authUser => {
return this.props.firebase.user(authUser.user.uid).set(
{
name: values.name,
email: values.email,
createdAt: new Date()
// .toISOString()
// createdAt: this.props.firebase.fieldValue.serverTimestamp()
},
{ merge: true },
);
// console.log(this.props.firebase.fieldValue.serverTimestamp())
})
.then(() => {
return this.props.firebase.doSendEmailVerification();
})
// .then(() => {message.success("Success") })
.then(() => {
this.setState({ ...initialValues });
this.props.history.push(ROUTES.DASHBOARD);
})
});
event.preventDefault();
};
这可以在数据库中记录日期。
firestore 条目的形式如下所示:
我正在尝试在此组件中显示日期:
class UserList extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
users: [],
};
}
componentDidMount() {
this.setState({ loading: true });
this.unsubscribe = this.props.firebase
.users()
.onSnapshot(snapshot => {
let users = [];
snapshot.forEach(doc =>
users.push({ ...doc.data(), uid: doc.id }),
);
this.setState({
users,
loading: false,
});
});
}
componentWillUnmount() {
this.unsubscribe();
}
render() {
const { users, loading } = this.state;
return (
<div>
{loading && <div>Loading ...</div>}
<List
itemLayout="horizontal"
dataSource={users}
renderItem={item => (
<List.Item key={item.uid}>
<List.Item.Meta
title={item.name}
description={item.organisation}
/>
{item.email}
{item.createdAt}
{item.createdAt.toDate()}
{item.createdAt.toDate().toISOString()}
</List.Item>
// )
)}
/>
</div>
);
}
}
export default withFirebase(UserList);
当我尝试读回它时 - 使用:
{项目.电子邮件}
错误消息如下:
Error: Objects are not valid as a React child (found: Timestamp(seconds=1576363035, nanoseconds=52000000)). If you meant to render a collection of children, use an array instead. in Item (at UserIndex.jsx:74)
当我尝试使用这些尝试时:
{item.createdAt}
{item.createdAt.toDate()}
{item.createdAt.toDate().toISOString()}
我收到一条错误消息:
TypeError: Cannot read property 'toDate' of undefined
基于读回其他字段中同一文档中记录的条目的能力，我期望其中任何一个都能够产生输出 - 即使它的格式不符合我想要的方式。但这不会发生。
下一次尝试
以 Waelmas 为例，我尝试按照说明进行操作，但我们在第一步中没有得到相同的响应。当 Walemas 根据 .toDate() 扩展名获取输出时，我收到一条错误消息，指出 toDate() 不是函数。
与 Firebase 文档一致，我尝试过:
const docRef = this.props.firebase.db.collection("users").doc("HnH5TeCU1lUjeTqAYJ34ycjt78w22");
docRef.get().then(function(docRef) {
if (doc.exists) {
console.log("Document createdAt:", docRef.createdAt.toDate());
} })
这会产生一串语法错误，但我找不到解决方法。
下一次尝试
然后，我尝试制作一个新表单，看看是否可以在没有用户表单例份验证方面的情况下进行探索。
我有一个接受输入的表单:
this.props.firebase.db.collection("insights").add({
title: title,
text: text,
// createdAt1: new Date(),
createdAt: this.props.firebase.fieldValue.serverTimestamp()
})
在前面的表单中，新的 Date() 尝试在数据库中记录日期，在此示例中，createdAt 和createdAt1 的两个字段都会生成相同的数据库条目:
<div>{item.createdAt.toDate()}</div>
<div>{item.createdAt.toDate()}</div>
当我尝试输出日期值时，第一个会生成一个错误，内容如下:
Objects are not valid as a React child (found: Sun Dec 15 2019 21:33:32 GMT+1100 (Australian Eastern Daylight Time)). If you meant to render a collection of children, use an array instead
第二个生成错误:
TypeError: Cannot read property 'toDate' of undefined
我一直在想下一步该尝试什么。
我看到了this post这表明以下内容可能会做一些有用的事情:
{item.createdAt1.Date.valueOf()}
事实并非如此。它会呈现一个错误:
TypeError: Cannot read property 'Date' of undefined
这个post似乎和我遇到了同样的麻烦，但没有讨论他们如何设法显示他们存储的日期值。
这个post似乎陷入了数组错误消息，但似乎已经弄清楚如何使用createdAt.toDate()显示日期
最佳答案
经过一番讨论，我们发现OP用户对象中的时间戳可以这样渲染:
render() {
const { users, loading } = this.state;
return (
<div>
{loading && <div>Loading ...</div>}
{users.map(user => (
<Paragraph key={user.uid}>
<key={user.uid}>
{user.email}
{user.name}
{new Date(user.createdAt.seconds * 1000).toLocaleDateString("en-US")}
我在虚拟 React 项目中重新创建了您的示例，并收到了与预期相同的错误。
Error: Objects are not valid as a React child
我能够使用以下方法使其正确呈现，这也应该适合您:
{new Date(user.createdAt._seconds * 1000).toLocaleDateString("en-US")}
对于我的示例时间戳，呈现为:
<小时/>12/30/2019
确保您使用的时间戳已保存到 Firestore:
createdAt: this.props.firebase.Timestamp.fromDate(new Date())
注意:假设您的 firebase.firestore() 实例位于 this.props.firebase。在其他示例中，您使用 this.props.firebase，但这些方法看起来像是您自己创建的辅助方法。
获取此值时，它将是一个具有两个属性的对象 - _seconds 和 _nanoseconds。
请务必包含下划线。如果您使用createdAt.seconds，它将不起作用，它必须是createdAt._seconds。
我尝试过的其他事情:
user.createdAt.toDate() 抛出 toDate() 不是函数。
user.createdAt 抛出错误:对象作为 React 子项无效
new Date(user.createdAt._nanoseconds) 呈现错误的日期
关于javascript - React - 显示 firestore 时间戳，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59277859/