React - 显示一个 firestore 时间戳
React - display a firestore timestamp
我正在尝试弄清楚如何在 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
我见过 , and this post and this post, and 和其他类似的人，这表明 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);
当我尝试读回它时 - 使用：
{item.email}
错误信息如下：
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()
})
在之前的表单中，new 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 似乎卡在了数组错误消息中，但似乎已经找到了如何使用 createdAt.toDate()
显示日期的方法
因此 firestore 将日期存储为具有秒和纳秒的对象。如果您想要创建用户的时间，那么您可以引用 user.createdAt.nanoseconds。这 returns 一个 unix 时间戳。
您想如何在您的应用程序中显示日期？如果你想得到一个日期对象，那么你可以将时间戳传递给日期构造函数，就像这样 new Date(user.createdAt.nanoseconds)。我个人喜欢使用 date-fns 库来处理时间。
当您从 Firestore 获取时间戳时，它们属于以下类型：
要将其转换为普通时间戳，您可以使用 .toDate() 函数。
例如，对于如下文档：
我们可以使用类似的东西：
db.collection('[COLLECTION]').doc('[DOCUMENT]').get().then(function(doc) {
console.log(doc.data().[FIELD].toDate());
});
输出将是这样的：
2019-12-16T16:27:33.031Z
现在要进一步处理该时间戳，您可以将其转换为字符串并根据需要使用正则表达式对其进行修改。
例如：（我这里用的是Node.js）
db.collection('[COLLECTION]').doc('[DOCUMENT]').get().then(function(doc) {
var stringified = doc.data().[FIELD].toDate().toISOString();
//console.log(stringified);
var split1 = stringified.split('T');
var date = split1[0].replace(/\-/g, ' ');
console.log(date);
var time = split1[1].split('.');
console.log(time[0]);
});
会给你这样的输出：
如何将日期发送到 Firestore：
import firebase from 'firebase/app';
// ..........
// someObject is the object you're saving to your Firestore.
someObject.createdAt: firebase.firestore.Timestamp.fromDate(new Date())
回读方法：
function mapMonth(monthIndex) {
const months = {
0: 'jan',
1: 'feb',
2: 'mar',
3: 'apr',
4: 'may',
5: 'jun',
6: 'jul',
7: 'aug',
8: 'sep',
9: 'oct',
10: 'nov',
11: 'dec'
};
return months[monthIndex];
}
// ..........
// Here you already read the object from Firestore and send its properties as props to this component.
return(
<LS.PostDate_DIV>
Published on {mapMonth(props.createdAt.toDate().getMonth()) + ' '}
of {props.createdAt.toDate().getFullYear()}
</LS.PostDate_DIV>
);
}
基本上，当您执行 createdAt.toDate() 时，您会得到一个 JS 日期对象。
我一直都是这样用的！
发件人：https://cloud.google.com/firestore/docs/manage-data/add-data
这将创建一个基于用户系统日期的数据。
如果您需要确保所有内容都按时间顺序存储（没有任何用户系统设置错误系统日期的错误）在您的数据库中，您应该使用服务器时间戳。日期将使用您的 Firestore DB 内部日期系统设置。
如果用户的文档 ID 确实设置了 createdAt 属性，请尝试以下操作：
const docRef = db.collection("users").doc("[docID]");
docRef.get().then(function(docRef) {
if (docRef.exists) {
console.log("user created at:", docRef.data().createdAt.toDate());
}
})
在访问文档的属性之前调用 .data() 方法很重要
请注意，如果您访问未设置 createdAt 属性 的用户的 docRef.data().createdAt.toDate()，您将获得 TypeError: Cannot read property 'toDate' of undefined
因此，如果您的集合中有任何用户未定义 createdAt 属性。你应该实现一个逻辑来检查用户是否有 createdAt 属性 在得到它之前。你可以这样做：
//This code gets all the users and logs it's creation date in the console
docRef.get().then(function(docRef) {
if (docRef.exists && docRef.data().createdAt) {
console.log("User created at:", docRef.data().createdAt.toDate());
}
})
我过去遇到过问题，嵌套对象属性无法在 item.someProp 被视为对象的列表中正确呈现，但 item.someProp.someSubProp 不会解析为 [=13] 的值=] 在 item.someProp.
所以为了回避这个问题，为什么不在创建用户对象时将 Timestamp 计算为普通日期对象（或所需的显示格式）？
this.unsubscribe = this.props.firebase
.users()
.onSnapshot(snapshot => {
let users = [];
snapshot.forEach(doc =>
let docData = doc.data();
docData.createdAt = docData.createdAt.toDate();
users.push({ ...docData, uid: doc.id }),
);
this.setState({
users,
loading: false,
});
});
经过一番讨论，我们发现 OPs 用户对象中的时间戳可以这样呈现：
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() is not a function.
user.createdAt 抛出 Error: Objects are not valid as a React child
new Date(user.createdAt._nanoseconds) 呈现错误的日期
我正在尝试弄清楚如何在 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
我见过
我知道它知道 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);
当我尝试读回它时 - 使用：
{item.email}
错误信息如下：
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()
})
在之前的表单中，new 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 似乎卡在了数组错误消息中，但似乎已经找到了如何使用 createdAt.toDate()
显示日期的方法因此 firestore 将日期存储为具有秒和纳秒的对象。如果您想要创建用户的时间，那么您可以引用 user.createdAt.nanoseconds。这 returns 一个 unix 时间戳。
您想如何在您的应用程序中显示日期？如果你想得到一个日期对象，那么你可以将时间戳传递给日期构造函数，就像这样 new Date(user.createdAt.nanoseconds)。我个人喜欢使用 date-fns 库来处理时间。
当您从 Firestore 获取时间戳时，它们属于以下类型：
要将其转换为普通时间戳，您可以使用 .toDate() 函数。
例如，对于如下文档：
我们可以使用类似的东西：
db.collection('[COLLECTION]').doc('[DOCUMENT]').get().then(function(doc) {
console.log(doc.data().[FIELD].toDate());
});
输出将是这样的：
2019-12-16T16:27:33.031Z
现在要进一步处理该时间戳，您可以将其转换为字符串并根据需要使用正则表达式对其进行修改。
例如：（我这里用的是Node.js）
db.collection('[COLLECTION]').doc('[DOCUMENT]').get().then(function(doc) {
var stringified = doc.data().[FIELD].toDate().toISOString();
//console.log(stringified);
var split1 = stringified.split('T');
var date = split1[0].replace(/\-/g, ' ');
console.log(date);
var time = split1[1].split('.');
console.log(time[0]);
});
会给你这样的输出：
如何将日期发送到 Firestore：
import firebase from 'firebase/app';
// ..........
// someObject is the object you're saving to your Firestore.
someObject.createdAt: firebase.firestore.Timestamp.fromDate(new Date())
回读方法：
function mapMonth(monthIndex) {
const months = {
0: 'jan',
1: 'feb',
2: 'mar',
3: 'apr',
4: 'may',
5: 'jun',
6: 'jul',
7: 'aug',
8: 'sep',
9: 'oct',
10: 'nov',
11: 'dec'
};
return months[monthIndex];
}
// ..........
// Here you already read the object from Firestore and send its properties as props to this component.
return(
<LS.PostDate_DIV>
Published on {mapMonth(props.createdAt.toDate().getMonth()) + ' '}
of {props.createdAt.toDate().getFullYear()}
</LS.PostDate_DIV>
);
}
基本上，当您执行 createdAt.toDate() 时，您会得到一个 JS 日期对象。
我一直都是这样用的！
发件人：https://cloud.google.com/firestore/docs/manage-data/add-data
这将创建一个基于用户系统日期的数据。 如果您需要确保所有内容都按时间顺序存储（没有任何用户系统设置错误系统日期的错误）在您的数据库中，您应该使用服务器时间戳。日期将使用您的 Firestore DB 内部日期系统设置。
如果用户的文档 ID 确实设置了 createdAt 属性，请尝试以下操作：
const docRef = db.collection("users").doc("[docID]");
docRef.get().then(function(docRef) {
if (docRef.exists) {
console.log("user created at:", docRef.data().createdAt.toDate());
}
})
在访问文档的属性之前调用 .data() 方法很重要
请注意，如果您访问未设置 createdAt 属性 的用户的 docRef.data().createdAt.toDate()，您将获得 TypeError: Cannot read property 'toDate' of undefined
因此，如果您的集合中有任何用户未定义 createdAt 属性。你应该实现一个逻辑来检查用户是否有 createdAt 属性 在得到它之前。你可以这样做：
//This code gets all the users and logs it's creation date in the console
docRef.get().then(function(docRef) {
if (docRef.exists && docRef.data().createdAt) {
console.log("User created at:", docRef.data().createdAt.toDate());
}
})
我过去遇到过问题，嵌套对象属性无法在 item.someProp 被视为对象的列表中正确呈现，但 item.someProp.someSubProp 不会解析为 [=13] 的值=] 在 item.someProp.
所以为了回避这个问题，为什么不在创建用户对象时将 Timestamp 计算为普通日期对象（或所需的显示格式）？
this.unsubscribe = this.props.firebase
.users()
.onSnapshot(snapshot => {
let users = [];
snapshot.forEach(doc =>
let docData = doc.data();
docData.createdAt = docData.createdAt.toDate();
users.push({ ...docData, uid: doc.id }),
);
this.setState({
users,
loading: false,
});
});
经过一番讨论，我们发现 OPs 用户对象中的时间戳可以这样呈现：
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() is not a function.
user.createdAt 抛出 Error: Objects are not valid as a React child
new Date(user.createdAt._nanoseconds) 呈现错误的日期