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

Question

我正在尝试从 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) 应用程序.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

Ps : DisplayId 组件从数据库中返回所有数据而无需过滤 const { id } = useParams() 从数据库中返回相应的 Id，所以我想有一个解决方案来过滤这个 id 的结果。

标签： reactjsfirebasegoogle-cloud-firestoredynamic-routing