Sto cercando di capire come visualizzare un timestamp in un app reagire.
Ho un documento del deposito con un campo chiamato creatoAt.
Sto cercando di includerlo in un elenco di output (estraendo qui i bit pertinenti in modo da non dover leggere l'intero elenco di campi).
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()}L'unico attributo che non verrà visualizzato è la data.
Ciascuno dei tentativi di cui sopra genera un errore che dice:
TypeError: impossibile leggere la proprietà 'toDate' di undefined
Ho visto questo post , questo post e questo post , e questo post e altri simili, che suggeriscono che toDate () dovrebbe funzionare. Ma - questa estensione genera un errore per me - anche quando provo l'estensione toString.
So che sa che c'è qualcosa nel negozio di alimentari perché quando provo user.createdAt, ricevo un errore dicendo che ha trovato un oggetto con secondi al suo interno.
Prendendo l'esempio da Waelmas di seguito, ho provato a registrare l'output del campo come:
this.db.collection('users').doc('HnH5TeCU1lUjeTqAYJ34ycjt78w22').get().then(function(doc) {
console.log(doc.data().createdAt.toDate());}
Ho anche provato ad aggiungere questo alla mia istruzione sulla mappa ma ho ricevuto un errore che diceva che user.get non è una funzione.
{user.get().then(function(doc) {
console.log(doc.data().createdAt.toDate());}
)}Genera lo stesso messaggio di errore di cui sopra.
PROSSIMO TENTATIVO
Una cosa strana che è emersa nel tentativo di trovare un modo per registrare una data in Firestore che mi permetta di rileggerla, è che quando cambio il mio gestore di invio in una forma per usare questa formulazione:
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();
};Funziona per registrare una data nel database.
La forma della voce del camino è simile alla seguente:
Sto cercando di visualizzare una data in questo componente:
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);Quando provo a rileggerlo, usando:
{} Item.email
Il messaggio di errore dice:
Errore: gli oggetti non sono validi come figlio React (trovato: Timestamp (secondi = 1576363035, nanosecondi = 52000000)). Se intendevi eseguire il rendering di una raccolta di elementi secondari, utilizza invece un array. nell'articolo (su UserIndex.jsx: 74)
Quando provo a usare ciascuno di questi tentativi:
{item.createdAt}
{item.createdAt.toDate()}
{item.createdAt.toDate().toISOString()}Viene visualizzato un errore che dice:
TypeError: impossibile leggere la proprietà 'toDate' di undefined
In base alla capacità di rileggere le voci registrate nello stesso documento in altri campi, mi aspetto che una di queste funzioni per produrre output, anche se non è formattata nel modo desiderato. Questo non succede.
PROSSIMO TENTATIVO
Prendendo l'esempio di Waelmas, ho provato a seguire le istruzioni, ma dove non stiamo ottenendo la stessa risposta è nel primo passo. Dove Walemas ottiene un output basato sull'estensione .toDate (), ricevo un errore che dice che la data () non è una funzione.
Coerentemente con la documentazione di Firebase, ho provato:
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());}})
Questo produce una serie di errori con la sintassi e non riesco a trovare un modo per aggirarli.
PROSSIMO TENTATIVO
Ho quindi provato a creare un nuovo modulo per vedere se potevo esplorare questo senza l'aspetto di autenticazione del modulo degli utenti.
Ho un modulo che accetta input come:
this.props.firebase.db.collection("insights").add({
title: title,
text: text,
// createdAt1: new Date(),
createdAt: this.props.firebase.fieldValue.serverTimestamp()
})Dove nel modulo precedente, il nuovo tentativo Date () ha funzionato per registrare una data nel database, in questo esempio entrambi i campi per CreatedAt e CreatedAt1 generano la stessa voce del database:
<div>{item.createdAt.toDate()}</div>
<div>{item.createdAt.toDate()}</div>Quando provo a generare il valore delle date, il primo genera un errore che dice:
Gli oggetti non sono validi come figlio React (trovato: dom 15 dicembre 2019 21:33:32 GMT + 1100 (ora legale orientale australiana)). Se intendevi eseguire il rendering di una raccolta di elementi secondari, utilizza invece un array
Il secondo genera l'errore dicendo:
TypeError: impossibile leggere la proprietà 'toDate' di undefined
Sono bloccato per idee su cosa provare dopo.
Ho visto questo post che suggerisce che quanto segue potrebbe fare qualcosa di utile:
{item.createdAt1.Date.valueOf()}Non Viene visualizzato un errore che dice:
TypeError: impossibile leggere la proprietà 'Date' di undefined
Questo post sembra avere i miei stessi problemi, ma non spiega come sono riusciti a visualizzare il valore della data memorizzato.
Questo post sembra rimanere bloccato al messaggio di errore dell'array, ma sembra aver capito come visualizzare una data usando CreatedAt.toDate ()
