Javascript 如何在React中呈现Firestore数据？

我对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;

import React，{Component}来自'React'；
导入“/App.css”；
从“./firebase/firebase”导入{database}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
输入字段：“”
};
}
onInputChange=（e）=>{
const inputField=e.target.value；
this.setState（（）=>（{inputField}））；
}
/*添加数据*/
onSubmit=（e）=>{
e、 预防默认值（）；
console.log（this.state.inputField）；
database.collection（'users'）。添加({
名称：this.state.inputField
})
。然后（（docRef）=>{
console.log（“用ID编写的文档：”，docRef.ID）
})
.catch（（错误）=>{
console.error（“添加文档时出错：”，错误）；
});
}
/*检索数据*/
onLoad=（e）=>{
const docRef=database.collection（'users'）.doc（'o6m4tffije42zanfvvc7s'）；
docRef.get（）。然后（（doc）=>{
如果（文件存在）{
log（“文档数据：”，doc.data（））；
}否则{
//在这种情况下，将不定义doc.data（）
log（“没有这样的文档！”）；
}
}).catch（函数（错误）{
log（“获取文档时出错：”，错误）；
});
}
render（）{
返回(
劳尔：{}

拯救
加载数据
);
}
}
导出默认应用程序；

您可以将数据保存在状态

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);
    });
}

然后根据需要呈现它们，我将在

标记中将它们显示为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>
    );
}

render（）{
让dataUI=this.state.data？无数据：{JSON.stringify（this.state.data）}；
返回(
劳尔：
用户界面数据
{dataUI}
拯救
加载数据
);
}

在React中直接使用Firebase/Firestore API可能会非常麻烦，并导致大量样板文件。您可以使用Firestorter，它在幕后使用mobx在几秒钟内将组件连接到Firestore