[英]How do I render Firestore data in React?
我是React和Firebase / Firestore的新手。 我瀏覽了Firestore文檔幾次,仍然感到迷茫。 這就是我知道的方法...我知道如何添加到Firestore數據庫,並且我知道如何將數據打印到控制台。 但是我不知道該如何渲染數據? 誰能指導我如何執行此操作? 謝謝
import React, { Component } from 'react';
import './App.css';
import { database } from './firebase/firebase';
class App extends Component {
constructor(props) {
super(props);
this.state = {
inputField: ''
};
}
onInputChange = (e) => {
const inputField = e.target.value;
this.setState(() => ({ inputField }));
}
/* Adding Data */
onSubmit = (e) => {
e.preventDefault();
console.log(this.state.inputField);
database.collection('users').add({
name: this.state.inputField
})
.then((docRef) => {
console.log("Doc written with ID: ", docRef.id)
})
.catch((error) => {
console.error("Error adding document: ", error);
});
}
/* Retrieving Data */
onLoad = (e) => {
const docRef = database.collection('users').doc('O6m4TFfIjE42ZaNfvC7s');
docRef.get().then((doc) => {
if (doc.exists) {
console.log("Document data:", doc.data());
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
}
render() {
return (
<div className="App">
<h1>Raul: <p>{}</p></h1>
<form onSubmit={this.onSubmit}>
<input
type="text"
value={this.state.inputField}
onChange={this.onInputChange}
/>
<button>Save</button>
</form>
<button onClick={this.onLoad}>Load Data</button>
</div>
);
}
}
export default App;
您可以將數據保存在狀態中
constructor(props)
{
super(props);
this.state = {
inputField: '',
data: null,
};
}
加載數據時將數據保存到狀態
onLoad = (e) => {
const docRef = database.collection('users').doc('O6m4TFfIjE42ZaNfvC7s');
docRef.get().then((doc) => {
if (doc.exists) {
let data = doc.data();
this.setState({ data: data });
console.log("Document data:", data);
} else {
// doc.data() will be undefined in this case
this.setState({ data: null });
console.log("No such document!");
}
}).catch(function (error) {
this.setState({ data: null });
console.log("Error getting document:", error);
});
}
然后根據需要渲染它們,我將在<pre>
標記中將它們顯示為json
render() {
let dataUI = this.state.data ? <h1>No Data</h1> : <pre>{JSON.stringify(this.state.data)}</pre>;
return (
<div className="App">
<h1>Raul: </h1>
<div>
<h1>UI Data</h1>
{dataUI}
</div>
<form onSubmit={this.onSubmit}>
<input
type="text"
value={this.state.inputField}
onChange={this.onInputChange}
/>
<button>Save</button>
</form>
<button onClick={this.onLoad}>Load Data</button>
</div>
);
}
直接在React中使用Firebase / Firestore API會很麻煩,並且會導致很多樣板。 您可以使用Firestorter,后者在后台使用mobx在幾秒鍾內將組件連接到Firestore。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.