反応アプリでファイアストアのタイムスタンプを表示する方法を理解しようとしています。
「createdAt」という名前のフィールドを持つFirestoreドキュメントがあります。
私はそれを出力のリストに含めようとしています（ここで関連するビットを抽出して、フィールドのリスト全体を読む必要がないようにします）。
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：未定義のプロパティ 'toDate'を読み取れません
私はこの投稿、この投稿とこの投稿、そしてこの投稿とそれらのような他の投稿を見てきました。これらはtoDate（）が機能することを示唆しています。しかし、この拡張機能は私にエラーをスローします-toString拡張機能を試したときも含めます。
私がuser.createdAtを試すと、秒のあるオブジェクトが見つかったというエラーが表示されるため、firestoreに何かがあることを知っています。
以下のWaelmasの例を取り上げて、フィールドの出力を次のようにログに記録しようとしました。
this.db.collection('users').doc('HnH5TeCU1lUjeTqAYJ34ycjt78w22').get().then(function(doc) {
console.log(doc.data().createdAt.toDate());
}
これもマップステートメントに追加しようとしましたが、user.getが関数ではないというエラーが表示されました。
{user.get().then(function(doc) {
console.log(doc.data().createdAt.toDate());}
)}
上記と同じエラーメッセージが生成されます。
次の試み
Firestoreで日付を記録し、それを読み取れるようにする方法を見つけようとしたときに発生した奇妙なことの1つは、送信ハンドラを1つのフォームで変更してこの式を使用することです。
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}
エラーメッセージは次のとおりです。
エラー：オブジェクトはReactの子としては無効です（検出：Timestamp（seconds = 1576363035、nanoseconds = 52000000））。子のコレクションをレンダリングする場合は、代わりに配列を使用してください。アイテム内（UserIndex.jsx：74）
これらの各試行を使用しようとすると：
{item.createdAt}
{item.createdAt.toDate()}
{item.createdAt.toDate().toISOString()}私は言うエラーが出ます：
TypeError：未定義のプロパティ 'toDate'を読み取れません
他のフィールドの同じドキュメントに記録されたエントリを読み戻す機能に基づいて、私はこれらのいずれかが出力を生成するために機能することを期待しています-私が望む方法でフォーマットされていなくても。それは起こりません。
次の試み
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>日付の値を出力しようとすると、最初のエラーは次のようなエラーを生成します。
オブジェクトはReactの子としては無効です（検出日：2019年12月15日21:33:32 GMT + 1100（オーストラリア東部夏時間））。子のコレクションをレンダリングするつもりなら、代わりに配列を使用してください
2番目は、次のエラーを生成します。
TypeError：未定義のプロパティ 'toDate'を読み取れません
私は次に何をしようかというアイデアに行き詰まっています。
私はこの投稿を見ましたが、これは次のことが役に立つかもしれないことを示唆しています：
{item.createdAt1.Date.valueOf()}そうではありません。それは言うエラーをレンダリングします：
TypeError：未定義のプロパティ 'Date'を読み取れません
この投稿は私と同じ問題を抱えているようですが、格納された日付値を表示する方法については触れていません。
この投稿は配列エラーメッセージで行き詰まっているようですが、createdAt.toDate（）を使用して日付を表示する方法を理解しているようです
