使用Firestore和React中的选定文档从集合中获取字段的数据

Question

我希望在一个字段中显示数据。此时，我的数据库结构在Firestore中表示如下:收集(午餐)=>Document (mon, true, web, thu, fri) =>场地(甜点、主菜、配菜、汤)

Firestore数据库结构

我在这里要做的是从集合中获取所有文档并通过映射检索它。预期的结果是在选定的字段中返回一个值。例如，我想显示甜品true，结果应该显示"Banana "椰子木薯布丁。然而，它返回到所有的数据定位在现场。就像下面的插图。

结果

下面是我尝试使用的代码片段，但它没有工作:

export default function Menu() {
const [menu, setMenu] = useState([]);    
useEffect(() => {
fetchMenu();            
}, []);
useEffect(() => {
console.log(menu)
}, [menu]);
function fetchMenu() {
const menuCollection = collection(db, 'lunch')
getDocs(menuCollection)
// .then((doc)=>{console.log(doc.data(),doc.id)})
.then(response => {
const menuRef = response.docs.map((doc) =>(
{
data:doc.data(),
id: doc.id
}
))
setMenu(menuRef)
})
.catch(error => console.log(error.message))
}
return (
<>
<SubNav content="Menu"></SubNav>
<div className="App">
<ul>
{menu.map((menu) => (
<li key={menu.tue}>{menu.data.dessert}</li>
))}
</ul>

</div>
</>
);

谢谢!

Answer 1

根据您的图像，您的菜单看起来像

[
{data: {...}, id: 'mon'},
{data: {...}, id: 'tue'},
{data: {...}, id: 'wed'},
]

当迭代这个数组菜单时。这行不通你需要做一个if检查，像这样

<ul>
{menu.map((menu) => (menu.id === 'tue' && 
<li key={menu.tue}>{menu.data.dessert}</li>
))}
</ul>