[英]Why can't I display more data from firebase?
I know I am making a mistake somewhere.我知道我在某个地方犯了一个错误。 I am trying to display all food items from my firebase database onto my restaurant website.
我正在尝试将我的 firebase 数据库中的所有食品显示到我的餐厅网站上。 So far, I can only display "all_Day_Special" and not anything else.
到目前为止,我只能显示“all_Day_Special”而不能显示其他任何内容。
import './Home.css';
import React from "react";
//import Categories from "./Categories";
//import items from "./data";
import { all_Day_Special, menu_Add_Ins, menu_Appetizers, menu_Beef, menu_Chicken, menu_Chow_Mein,
menu_Combinations, menu_Deep_Fried_Goodiness, menu_Dessert, menu_Flavor, menu_Fried_Rice, menu_Hot,
menu_Pork, menu_Seafood_Platter, menu_Sides, menu_Vegetable, menu_Whats_Cooking, menu_Wing } from './firebase/firebaseConfig';
import { useState, useEffect, ReactDOM} from 'react';
import {collection, doc, setDoc, addDoc, getDocs} from 'firebase/firestore';
function Menu() {
const [food, setFood] = useState([]);
useEffect(() => {
const getFood = async () => {
const data = await getDocs(all_Day_Special, menu_Add_Ins, menu_Appetizers, menu_Beef, menu_Chicken, menu_Chow_Mein,
menu_Combinations, menu_Deep_Fried_Goodiness, menu_Dessert, menu_Flavor, menu_Fried_Rice, menu_Hot,
menu_Pork, menu_Seafood_Platter, menu_Sides, menu_Vegetable, menu_Whats_Cooking, menu_Wing);
setFood(data.docs.map((doc) => ({ ...doc.data(), id: doc.id})));
};
getFood();
}, []);
return(
<div className='menu'>
<div className="top-section"></div>
{food.map((item) => {
return (
<article key={item.id} className="menu-items">
<img src={item.ImageURL} alt={item.Name} className="photo" />
<div className="item-info">
<header>
<h4>{item.Name}</h4>
<h4 className="price">${item.Price}</h4>
</header>
<p className="item-text">{item.Description}</p>
</div>
</article>
);
})}
</div>
);
}
export default Menu;
I'm thinking I would need to make more constants?我在想我需要做更多的常量? It does seem repetitive and I'm sure it can be done in a more efficient way.
它看起来确实是重复的,我相信它可以以更有效的方式完成。
I'm pretty sure the getDocs() function's first param is a collection
or a query
, so if you want to get docs from multiple collections like what you're doing, you need to repeatedly call getDocs()
on individual collections.我很确定getDocs()函数的第一个参数是一个
collection
或一个query
,所以如果你想像你正在做的那样从多个 collections 获取文档,你需要在单个 collections 上重复调用getDocs()
。
What you're doing will likely result in Firestore only returning the docs from all_Day_Special
.您正在做的事情可能会导致 Firestore 仅返回来自
all_Day_Special
的文档。
You can not fetch multiple collections like that, but mainly you must have setup your firebase too complex... here is how I could do it你不能像那样获取多个 collections,但主要是你必须设置你的 firebase 太复杂了......这就是我能做到的
Firebase Here is how my firebase would be structured: I could first have a collection
called "menu"
then let firebase generate doc.id
for me and in my document
will have the following object structure... Firebase这是我的 firebase 的结构:我可以先有一个名为
"menu"
的collection
,然后让 firebase 为我生成doc.id
,在我的document
中将具有以下 object 结构......
name: "shrimp",
price: 10,
category: "sea",
special: true //all_day_special as a boolean,
spicy: boolean //you can add whatever categories
This way you will be able to call one function and get everything you need easily, then your firebase would look something like this:这样您就可以拨打一个 function 并轻松获得您需要的一切,然后您的 firebase 将如下所示:
import { collection, query, where, getDocs } from "firebase/firestore";
//use query to get specific items
useEffect(()=>{
const q = query(collection(db, "menu"), where("special", "==", true));
const getFood = async () => {
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => setFood({ ...doc.data(), id: doc.id}))
}
getFood()
},[])
//to get all items in the menu collection use the below::
const querySnapshot = await getDocs(collection(db, "menu"));
querySnapshot.forEach((doc) => setFood({ ...doc.data(), id: doc.id}));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.