Я намагаюся розібратися, як відобразити часову позначку 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: Неможливо прочитати властивість 'toDate' для невизначеного
Я бачив цю публікацію , і цю публікацію, і цю публікацію , і цю публікацію тощо, як вони, які підказують, що toDate () має працювати. Але - це розширення викликає помилку для мене - в тому числі, коли я намагаюся розширення toString.
Я знаю, що це знає, що є щось у firestore, тому що коли я намагаюся user.createAt, я отримую помилку про те, що він знайшов об'єкт із секундами в ньому.
Взявши приклад із 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, що дозволяє мені потім її прочитати, - це те, що я змінюю обробник подачі в одній формі, щоб використовувати цю формулювання:
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();
};Це працює для запису дати в базу даних.
Форма входу в камінь виглядає так:
Я намагаюся відобразити дату в цьому компоненті:
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}
Повідомлення про помилку звучить так:
Помилка: Об'єкти недійсні як дитина-реагувач (знайдено: мітка часу (секунди = 1576363035, наносекунд = 52000000)). Якщо ви мали намір надати колекцію дітей, використовуйте замість цього масив. у пункті (на UserIndex.jsx: 74)
Коли я намагаюся використовувати кожну з цих спроб:
{item.createdAt}
{item.createdAt.toDate()}
{item.createdAt.toDate().toISOString()}Я отримую помилку, яка говорить:
TypeError: Неможливо прочитати властивість 'toDate' для невизначеного
Виходячи з здатності читати назад записи, записані в тому самому документі в інших полях, я очікую, що будь-яка з них спрацює, щоб отримати вихід-навіть, якщо він не форматований так, як я хочу. Цього не буває.
НАСЛІДЧИЙ НАСТУП
Беручи приклад Ваельмаса, я намагався слідувати інструкціям, але там, де ми не отримуємо однакової відповіді, на першому кроці. Коли 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 () працювала, щоб записати дату в базу даних, у цьому прикладі обидва поля для createAt та createdAt1 генерують один і той же запис бази даних:
<div>{item.createdAt.toDate()}</div>
<div>{item.createdAt.toDate()}</div>Коли я намагаюся вивести значення дат, перша створює помилку, яка говорить:
Об'єкти не дійсні як дитина-реагувач (знайдено: 15 грудня 2019 21:33:32 GMT + 1100 (австралійський східний літній час)). Якщо ви мали намір надати колекцію дітей, використовуйте замість цього масив
Другий породжує помилку:
TypeError: Неможливо прочитати властивість 'toDate' для невизначеного
Я застряг у ідеях, що спробувати далі.
Я побачив цей пост, який говорить про те, що наступне може зробити щось корисне:
{item.createdAt1.Date.valueOf()}Це не так. Це робить помилку, яка говорить:
TypeError: Неможливо прочитати властивість "Date" невизначеного
Здається, ця публікація має ті ж проблеми, що і я, але не вникає в те, як їм вдалося відобразити збережене значення дати.
Здається, ця публікація застрягла в повідомленні про помилку масиву, але, схоже, з’ясувала, як відобразити дату за допомогою createAt.toDate ()
