刷新页面时不会加载 Firebase 实时数据答案

【问题标题】：Firebase realtime data will not mount when page is refreshed刷新页面时不会加载 Firebase 实时数据
【发布时间】：2021-06-13 22:46:21
【问题描述】：

我们第一次加载应用程序时，我们的所有数据都会显示，但是一旦我刷新页面，数据就不会显示。如何确保页面刷新时数据显示？

这是我从中提取 firebase 数据的代码。

import firebase from '../initfirebase';

export function FirebaseTablePull(){
    let jobs = [];
    firebase.database().ref("1h5GOL1WIfNEOtcxJVFQ0x_bgJxsPN5zJgVJOePmgJOY/Jobs").on("value", snapshot => {
        snapshot.forEach(snap => {
            jobs.push(snap.val());
        });
    });
    return jobs;

}

这是我们从 firebase 中提取数据的表。它在我们第一次加载应用程序时有效，但在我们刷新页面时不显示任何内容。

import { FirebaseTablePull } from './firebaseTablePull';
import TableHeader from './TableHeader.js';
import Footer from './Footer.js';

export default function SimpleTable() {
  let job = FirebaseTablePull();

  return ( 

    <section id='table'>
    <TableHeader />
    <table class="table">
          <thead class="thead-dark">
              <tr>
                  <th>Company</th>
                  <th>Location</th>
                  <th>Position</th>
                  <th>Date Posted</th>
              </tr>
          </thead>
          <tbody>
          {job.map(data => {
              
              return (
                  <tr>     
                  <td>{data.company}</td>
                  <td>{data.location}</td>
                  <td>{data.position}</td>
                  <td>{data.datePosted}</td>
                  </tr>
                  
              );
            
              })}
      
            
          </tbody>
          
      </table>
    <Footer />
    </section>
  );

}

【问题讨论】：

处理组件安装/更新的 UseEffect 在哪里？
老实说，我不久前尝试实现它，但没有让它工作，所以如果你能帮助我，那就太好了。我真的不知道从哪里开始。
你需要在 useEffect() 中拉取数据，刷新时会获取数据..
我应该在我的表格组件中使用 useEffect() 吗？

标签： reactjs firebase firebase-realtime-database

【解决方案1】：

这是我的一个项目中的一个代码 sn-p 也许它会对你有所帮助

export const ProjectPage = ()=>{
    useEffect(()=>{
        let dbRef = firestore.collection("projects");
        dbRef.onSnapshot((result) => {//do something});},[]);
    
return( <div>{//some data and stuff}</div>);

}

这是 useEffect ，对状态变量没有任何依赖，并且仅在安装组件时（加载页面时）运行一次

只需将你的代码放在你提取数据的地方到 useEffect 钩子中

【讨论】：