我正在尝试从 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 的结果。