在 React 应用中使用来自 Firebase Firestore 的数据

2020-11-16 08:00:00 · 飞浪

Firebase 通过提供身份验证、云功能、实时数据库、Cloud Firestore 等，充当整个后端服务。

介绍

Firebase 为您提供众多开箱即用的功能，让您可以轻松构建无服务器Web 应用。它提供身份验证、云功能、实时数据库、Cloud Firestore 等，可充当整个后端即服务。

在本指南中，您将学习如何在 React 应用中使用来自 Firebase Cloud Firestore 的数据。

初始设置

确保您在firebase.google.com上有一个帐户并创建一个新的 Firebase 项目。点击将Firebase 添加到您的 Web 应用并按照步骤操作。转到 Cloud Firestore 部分并创建一个名为Blogs的新集合。添加一个文档，如下所示。

      body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
created_at: November 11, 2020 at 12:00:00 AM UTC+5:30
posted_by: "Sam"
title: "New Egg Recipe"
    

现在转到您的 React 应用并安装 Firebase。

      npm i firebase

创建一个名为firebase.config.js的新文件来存储连接到 Firebase 项目所需的所有配置详细信息。转到项目设置并复制 firebaseConfig并将其粘贴到firebase.config.js文件中。

      import firebase from 'firebase'
var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxx",
    measurementId: "xxxxxxxxxxxxxxxx"
  };
  
const firebaseApp=firebase.initializeApp(firebaseConfig);
const db=firebase.firestore();

export default db;
    

确保已正确添加您自己的 Firebase 项目的firebaseConfig 。通过将firebaseConfig传递给firebase.initializeApp()方法来初始化 Firebase 应用，并通过调用 Firebase 对象上的firestore()方法并将其存储在变量中来获取对数据库的引用。

使用 Firestore 中的数据

从 Firestore 使用数据类似于从 REST API 使用 JSON 数据。首先，从配置文件中导入db以及useState和useEffect以创建state，并触发请求以获取数据。

      import db from './firebase.config';
import React,{useState,useEffect} from 'react';
    

创建一个状态来存储你的数据。

      const [blogs,setBlogs]=useState([])

创建一个异步函数来从 Firestore 获取数据并在useEffect内部调用它，如下所示。

      useEffect(() => {
    fetchBlogs();
  }, [])
    

在fetchBlogs()方法中，通过调用db对象上的collection()方法并将集合的名称作为参数传入，获取对数据库的引用。

      const fetchBlogs=async()=>{
    const response=db.collection('Blogs');
}
    

为了从此响应对象获取数据，使用await关键字，在响应对象上调用get()方法并将其存储在变量数据中。

      const fetchBlogs=async()=>{
    const response=db.collection('Blogs');
    const data=await response.get();
}
    

数据对象包含一个名为docs的属性，其中包含有关集合中每个文档的信息。因此，每个文档都可以包含有关单个博客的信息。遍历data.docs以获取单个项目，并对每个项目调用data()方法以获取其中的数据。

      const fetchBlogs=async()=>{
    const response=db.collection('Blogs');
    const data=await response.get();
    data.docs.forEach(item=>{
     setBlogs([...blogs,item.data()])
    })
}
    

您可以在循环内将数据添加到状态，如上所示。由于Blogs集合由单个文档组成，因此您的状态也将包含单个项目。最后，循环遍历您的状态并在 DOM 上呈现数据。

      return (
    <div className="App">
      {
        blogs && blogs.map(blog=>{
          return(
            <div className="blog-container">
              <h4>{blog.title}</h4>
              <p>{blog.body}</p>
            </div>
          )
        })
      }
    </div>
  );
    

最终代码

查看下面使用 Firestore 集合中的数据的完整代码。

      import './App.css';
import db from './firebase.config';
import React,{useState,useEffect} from 'react';

function App() {
  const [blogs,setBlogs]=useState([])
  const fetchBlogs=async()=>{
    const response=db.collection('Blogs');
    const data=await response.get();
    data.docs.forEach(item=>{
     setBlogs([...blogs,item.data()])
    })
  }
  useEffect(() => {
    fetchBlogs();
  }, [])
  return (
    <div className="App">
      {
        blogs && blogs.map(blog=>{
          return(
            <div className="blog-container">
              <h4>{blog.title}</h4>
              <p>{blog.body}</p>
            </div>
          )
        })
      }
    </div>
  );
}

export default App;
    

结论

您不仅可以使用数据，还可以将数据添加到 Firebase 集合中。您还可以根据所需数据库的复杂程度通过嵌套集合来创建复杂的结构。将 React 与 Firebase 结合使用可以帮助您在短时间内开发原型和基于生产的应用程序，而无需任何复杂的服务器设置。您可以通过阅读官方文档来探索 Firebase 的更多功能。

如果您有任何疑问，请随时通过Codealphabet与我联系。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 React 应用中使用来自 Firebase Firestore 的数据

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." created_at: November 11, 2020 at 12:00:00 AM UTC+5:30 posted_by: "Sam" title: "New Egg Recipe"

import firebase from 'firebase' var firebaseConfig = { apiKey: "xxxxxxxxxxxxxxxx", authDomain: "xxxxxxxxxxxxxxxx", databaseURL: "xxxxxxxxxxxxxxxx", projectId: "xxxxxxxxxxxxxxxx", storageBucket: "xxxxxxxxxxxxxxxx", messagingSenderId: "xxxxxxxxxxxxxxxx", appId: "xxxxxxxxxxxxxxxx", measurementId: "xxxxxxxxxxxxxxxx" }; const firebaseApp=firebase.initializeApp(firebaseConfig); const db=firebase.firestore(); export default db;

return ( <div className="App"> { blogs && blogs.map(blog=>{ return( <div className="blog-container"> <h4>{blog.title}</h4> <p>{blog.body}</p> </div> ) }) } </div> );

import './App.css'; import db from './firebase.config'; import React,{useState,useEffect} from 'react'; function App() { const [blogs,setBlogs]=useState([]) const fetchBlogs=async()=>{ const response=db.collection('Blogs'); const data=await response.get(); data.docs.forEach(item=>{ setBlogs([...blogs,item.data()]) }) } useEffect(() => { fetchBlogs(); }, []) return ( <div className="App"> { blogs && blogs.map(blog=>{ return( <div className="blog-container"> <h4>{blog.title}</h4> <p>{blog.body}</p> </div> ) }) } </div> ); } export default App;