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

Question

我有三个数据字段，默认情况下在构造函数中它们都设置为全部。我想要做的是对这些字段进行多个查询，例如在 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）不同），其他字段将不起作用。

标签： reactjsdatabasegoogle-cloud-firestorefiltering

Answer 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()
  ...