有条件地在组件中渲染 Firebase 数据答案

【问题标题】：Conditionally render firebase data in component有条件地在组件中渲染 Firebase 数据
【发布时间】：2021-01-10 04:46:25
【问题描述】：

目标：渲染我的 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 的数据的任何想法？

【问题讨论】：

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

您似乎只想add a filter 进行查询以仅查找您要显示的文档。

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

【讨论】：

感谢您的文档，对这一切还是有点新意！你帮了我很多！谢谢！
很高兴知道。在 Stack Overflow 上，习惯上使用答案左侧的按钮来投票和接受有用的答案。
太棒了！我尝试投票，但收到此消息“感谢您的反馈！声望低于 15 人的投票将被记录，但不要更改公开显示的帖子得分。”还是谢谢！
您应该能够使用复选框来接受正确的答案。
只需点击检查按钮，一切就绪！