React JS 无法在 jsx 元素中显示 firebase 数据答案

【问题标题】：React JS not able to display firebase data in jsx elementReact JS 无法在 jsx 元素中显示 firebase 数据
【发布时间】：2021-09-08 21:52:57
【问题描述】：

我是 React JS 的新手，我一直在从事一个项目，我需要首先从 firebase firestore db 获取数据，然后通过创建新元素将其显示在页面上。我需要在不刷新整个页面且仅显示渲染元素的情况下完成此操作。我已经从数据库中获取数据并将其放入一个数组中，之后我尝试使用 map 函数遍历数组并返回一个包含数据的 h1 元素，但它没有显示在页面上。我对数据做了console.log，它按预期显示在控制台中。我的主要问题是，如何使用包含数组数据的 map 函数返回一个 h1 元素？

import React, {useRef} from "react";
import {useHistory} from 'react-router-dom';
import '../connectApp.css';
import Navbar from './Navbar.js';
import SideBar from './sideBar.js';
import {db} from '../fbConfig';
import {auth} from '../fbConfig';
import ReactDOM from 'react-dom'

const App = () => {
      const history = useHistory();
      const data = [];
      if(localStorage.getItem("isAuth") === 'null') { //NOTE - we are only able to store strings in localStorage
         history.push('/');
      }
 
      var docRef = db.collection("posts");
        docRef.onSnapshot(snapshot => {
           let changes = snapshot.docChanges();
           console.log(changes);
           changes.forEach(change => {
              if(change.type == "added") {
                 data.push({
                    imageUploader:change.doc.data().imageUploader,
                    imageCaption:change.doc.data().imageCaption, 
                    imageUrl:change.doc.data().imageUrl

                 })
              }
           })
           return <div>
        {data.map(data => {
               console.log(data)
        })}
     </div>
         
        })
      return (
         
          <div className="container">
             <Navbar />
             <SideBar />
         </div>
      );
  }
  export default App

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【问题讨论】：

标签： javascript reactjs firebase dictionary google-cloud-firestore

【解决方案1】：

我发现通过使用this.state 方法，我能够为我的数据设置一个状态，将我的数据存储在一个数组中，更新状态，然后像之前一样使用map 函数来获得数据并将其显示在 div 中。

【讨论】：