有条件地在组件中呈现 Firebase 数据

Question

目标：渲染我的 firestore中status: false所有文档

这是我的文档结构：

Status: false
Artist: Pablo Picasso
Medium: Oil Painting

这是循环遍历firestore中数据的代码......

function Feed() {
  const [artworks, setArtworks] = useState([]);

  useEffect(() => {
    db.collection("artworks").onSnapshot((snapshot) =>
      setArtworks(snapshot.docs.map((doc) => doc.data()))
    );
  }, []);

  return (
    <div className="feed">
      <div className="artwork__feed">
        {artworks.map((artwork) => (
          <FeedCard
            artist={artwork.artist}
            medium={artwork.medium}
          />
        ))}
      </div>
    </div>
  );
}

关于如何遍历 firebase 并仅呈现具有status: false的数据的任何想法？

Answer 1

似乎您只想向查询添加过滤器以仅查找要显示的文档。

db.collection("artworks").where("Status", "==", false).onSnapshot(...)