如何使用 React JS firestore 制作搜索框答案

【问题标题】：How to make a search box with React JS firestore如何使用 React JS firestore 制作搜索框
【发布时间】：2021-01-08 01:35:24
【问题描述】：

代码请帮助我如何使用 React JS firestore 制作搜索框

如何在代码中添加搜索？请帮忙。

import firebase from "../firebase";

import "./row.css";

function useAksiyon() {
  const [aksi, setAksi] = useState([]);
  useEffect(() => {
    firebase
      .firestore()
      .collection("aksiyon")
      .onSnapshot((snapshot) => {
        const newAksi = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setAksi(newAksi);
      });
  }, []);
  return aksi;
}

const AksionList = () => {
  const aksi = useAksiyon();

  return (
    <div className="row">
      <h3>Aksiyon Filmleri</h3>
      <div className="row__posters">
        {aksi.map((aksiyon) => (
          <a href={aksiyon.movies_iframe} key={aksiyon.movies_id}>
            <img
              className="row__poster"
              src={aksiyon.movies_poster}
              alt={aksiyon.movies_title}
            />
          </a>
        ))}
      </div>
    </div>
  );
};

export default AksionList;

请帮助如何使用 React JS firestore 制作搜索框

【问题讨论】：

看看 Firestore 的查询，它允许您过滤返回的文档：firebase.google.com/docs/firestore/query-data/queries
您能否提供您的 Firestore 结构以及您想在哪个集合中搜索？请提供有关您要进行的搜索的更多详细信息。

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

如果你想在特定的集合中搜索，那么你可以将搜索框中的单词保存到一个变量中，然后创建一个query，如下所示：

db.collection("aksiyon").where("capital", "==", YOUR_SEARCH)
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });

【讨论】：