[英]How do I render Firestore data in React?
I am fairly new to React and Firebase/Firestore. 我是React和Firebase / Firestore的新手。 I have gone through the Firestore docs a few times and still feel lost. 我浏览了Firestore文档几次,仍然感到迷茫。 Here's what I know how to do... I know how to add to my Firestore DB, and I know how to print data to the console. 这就是我知道的方法...我知道如何添加到Firestore数据库,并且我知道如何将数据打印到控制台。 But I don't know how to render that data? 但是我不知道该如何渲染数据? Can anyone please guide me on how to do this? 谁能指导我如何执行此操作? Thanks 谢谢
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;
you can save the data in the state 您可以将数据保存在状态中
constructor(props)
{
super(props);
this.state = {
inputField: '',
data: null,
};
}
save the data to state when data loaded 加载数据时将数据保存到状态
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);
});
}
and then render them as you want, I will display them as json in <pre>
tag 然后根据需要渲染它们,我将在<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>
);
}
Using the Firebase/Firestore API directly in React can be quite cumbersome and lead to a lot of boilerplate. 直接在React中使用Firebase / Firestore API会很麻烦,并且会导致很多样板。 You could use Firestorter, which uses mobx behind the scenes to hook up your components to Firestore within seconds. 您可以使用Firestorter,后者在后台使用mobx在几秒钟内将组件连接到Firestore。
https://github.com/IjzerenHein/firestorter https://github.com/IjzerenHein/firestorter
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.