如何在React js中使用动态ID从firebase获取数据

问题描述

我正在尝试从 firebase 集合中获取数据，这工作正常，但我的目标是仅显示具有特定 ID 的数据（在用户单击链接以显示标题的更多信息后）

应用的架构很简单：

1) displayTitle ：显示从数据库中获取的标题列表，每个标题都是一个链接，允许我们转到另一个页面以显示有关特定标题的更多详细信息。

import React,{ useEffect,useState } from 'react'

import { Link } from 'react-router-dom'

import { useAuth } from './contexts/AuthContext'

import { db } from './firebase'

default function displayTitle() {

  
 const [databases,setDatabases] = useState([])
 const [loading,setLoading] = useState(false)
 const { currentUser } = useAuth()
    function getDatafromDatabse() {
  
         if(currentUser) {
           
           setLoading(true);
           db.collection('users')
           .doc(currentUser?.uid)
           .collection('databases')
           .get().then((item) => {
             const items = item.docs.map(doc => ({ ...doc.data(),id: doc.id }));
            console.log(items);
           
            setDatabases(items);
            setLoading(false);
         
       
          });
  
       }else {
         setDatabases([])
         console.log("erreur ")
       }
       
        }
       
             useEffect(() => {
               getDatafromDatabse();
             
             },[]);
    
    return (
   
    
      <div >
        <h1>List of titles from the database</h1>
        {databases.map((database,id) => <div key={database.id}>  
         <Link to={`/displaytitle/${database.id}`} >
         {database.title}
       </Link>
       </div> )}
        
      </div>
   
  )
}

2) displayId ：应显示有关用户单击的标题（链接）的更多详细信息。 这些信息将是：关键字、作者、电子邮件等。

这个组件的问题在于它从数据库中获取所有信息（不仅是用户点击的指定标题，所以我需要用id过滤但我不知道如何申请在这个特定的例子中。。 由于这行代码，我能够获得特定的 id： const { id } = useParams()

import { db } from "./firebase";
import React,{ useState,useEffect } from 'react';
import { useHistory,useParams } from "react-router-dom"
import { useAuth } from "./contexts/AuthContext"



function displayId () {

  const history = useHistory();
  const { id } = useParams()
    const [databases,setDatabases] = useState([]);
    const [loading,setLoading] = useState(false);
    const { currentUser } = useAuth();

 
   function getDatafromDatabse() {
    
     if(currentUser) {
       
       setLoading(true);
       db.collection('users')
       .doc(currentUser?.uid)
       .collection('databases')
       .get().then((item) => {
         const items = item.docs.map(doc => ({ ...doc.data(),id: doc.id }));
        console.log(items);
       
        setDatabases(items);
        setLoading(false);
        
   
      });
   

   }else {
     setDatabases([])
     console.log("erreur ")
   }
   
    }
  
  useEffect(() => {
    getDatafromDatabse();
},[])   


    
    return (
     
        <div>

      
         {databases.map((database) => (
         
           <div key={database.id} >
         
           
       
      <div className="title">{database.title}</div>   
    

{database.inputFields.map((inputField)=> (
  <div key={inputField.id}>  




<div className="university">{inputField.university}</div>
</div>

))}


{database.inputFields.map((inputField)=> (
  <div key={inputField.id} >  



<div className="email">{inputField.email}</div>

</div>

))}
<div className="abstract">{"Abstact: " + database.abstract}</div>

        
<div className="keyword">{"Keywords: " + database.keyword}</div>


        </div>
      
      
      ))}
     

        </div>

    )

}

export default displayId

3) App.js

function App() {
  

  return (
  <div>
        <Router>
           <AuthProvider>
               <Switch>

            <PrivateRoute exact path='/'>
              <displayTitle  />
           </PrivateRoute>


           <PrivateRoute exact path='/displaytitle/:id'>
                <displayId />
             </PrivateRoute>   
          
              </Switch>
            </AuthProvider>
        </Router>
      </div>
    
  )
}

export default App

附： displayId 组件不使用过滤器返回数据库中的所有数据 const { id } = useParams() 从数据库中返回相应的 Id，所以我想有一个解决方案来用这个 id 过滤结果。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）