Firestore + React.js 如何通过用户过滤从集合中获取文档？答案

【问题标题】：Firestore + React.js how to get documents from a collections by filtering from user?Firestore + React.js 如何通过用户过滤从集合中获取文档？
【发布时间】：2020-07-24 15:14:34
【问题描述】：

我有三个数据字段，默认情况下在构造函数中它们都设置为全部。我想要做的是对这些字段进行多个查询，例如在 mysql 中。例如：field1 是苹果，field2 是橙色，我不要触摸字段 3。（顺便说一下，Tumu 的意思是“全部”。）这是我的代码：

class Kurumlar extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        isLoading: true,
        page: 1,
        HizmetTuru: "Tumu",
        HizmetAlani: "Tumu",
        Ucretlendirme: "Tumu"
    };
}

handleChange = e => {
    this.setState({
        [e.target.name]: e.target.value
    }, console.log(this.state));
}


componentDidMount() {
    const db = firebase.firestore();
    let docs = db.collection("Paydaslar")

    console.log(this.state)

    //docs = db.collection("Paydaslar").where("HizmetTuru", "==", this.state.HizmetTuru);
    docs.get()
        .then(snapshot => {
            let data = [];
            snapshot.forEach(doc => {
                if (doc.data().isVisible) {
                    data.push(doc.data());
                }
            });

            this.setState({ data, isLoading: false });
        })
        .catch(err => {
            console.log("Error getting documents", err);
        });
}

componentDidUpdate(){
    const db = firebase.firestore();
    let docs = db.collection("Paydaslar")

   if(this.state.HizmetTuru != "Tumu"){docs=db.collection("Paydaslar").where("HizmetTuru", "==", this.state.HizmetTuru)}
   if(this.state.HizmetAlani != "Tumu"){docs=db.collection("Paydaslar").where("HizmetAlani", "==", this.state.HizmetAlani)}
  if(this.state.Ucretlendirme != "Tumu"){docs=db.collection("Paydaslar").where("Ucretlendirme", "==", this.state.Ucretlendirme)}


    docs.get()
        .then(snapshot => {
            let data = [];
            snapshot.forEach(doc => {
                if (doc.data().isVisible) {
                    data.push(doc.data());
                }
            });

            this.setState({ data, isLoading: false });
        })
        .catch(err => {
            console.log("Error getting documents", err);
        });
}

这样如果1个字段被设置成一个值（不同于all（代码中的Tumu），其他字段就不起作用了。

【问题讨论】：

另外一件事我不知道如何在 firestore 的 where 查询中全选？

标签： reactjs database google-cloud-firestore filtering

【解决方案1】：

如果我理解正确，您希望根据用户选择的条件构建具有多种可能条件的查询。

在这种情况下，您可以使用构建器模式：

const db = firebase.firestore();
let query = db.collection("Paydaslar").collection("Paydaslar")

if(this.state.HizmetTuru != "Tumu") {
  query = query.where("HizmetTuru", "==", this.state.HizmetTuru)
}
if(this.state.HizmetAlani != "Tumu") {
  query = query.where("HizmetAlani", "==", this.state.HizmetAlani)
}
if(this.state.Ucretlendirme != "Tumu"){
  query = query.where("Ucretlendirme", "==", this.state.Ucretlendirme)
}

docs.get()
  ...

【讨论】：

【解决方案2】：

我只是在 if 部分发现了它，做：

    if (this.state.HizmetTuru != "Tumu") { docs = docs.where("HizmetTuru", "==", this.state.HizmetTuru) }
    if (this.state.HizmetAlani != "Tumu") { docs = docs.where("HizmetAlani", "==", this.state.HizmetAlani) }
    if (this.state.Ucretlendirme != "Tumu") { docs = docs.where("Ucretlendirme", "==", this.state.Ucretlendirme) }

【讨论】：