如何在Reactjs项目中使用firebase实现不同类别产品的数据获取,以显示在主页中



我想让不同类别的产品显示在主页上。以下代码仅从单个类别中获取数据。如何从多个类别中提取产品。我应该使用承诺吗?我觉得会有很多多余的代码。有更好的方法吗?

fetchProducts = async ( category )=>{
let productsRef = projectFirestore.collection("products");
let query = productsRef;
query = productsRef.where('category', '==', 'Beverage');
query.get().then((querySnapshot) => {
let products = [];
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
products.push({
name  : doc.data().name,
price : doc.data().price,
prev_price : doc.data().prev_price,
discount : doc.data().product_discount,
id    : doc.id, 
src   : doc.data().pictures[0].src,
rating: doc.data().rating
});
});

this.setState(() => {
return { products };
}, this.checkCartItems);
})

编辑:以下是正确的解决方案:docs-https://firebase.google.com/docs/firestore/query-data/queries#in_not-in_and_array-contains—任意

fetchProducts = async (categories) => {
let productsRef = projectFirestore.collection("products");
let query = productsRef.where('category', 'in', categories);
query.get().then((querySnapshot) => {
let products = [];
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
products.push({
name: doc.data().name,
price: doc.data().price,
prev_price: doc.data().prev_price,
discount: doc.data().product_discount,
id: doc.id,
src: doc.data().pictures[0].src,
rating: doc.data().rating,
});
});
this.setState(() => {
return { products };
}, this.checkCartItems);
})
.catch(err => console.log(err));
};

最新更新