Question

我正在尝试使用Firebase将“添加到收藏夹”功能编码到博客中。为此，我的想法是过滤包含所有文章的数组，并仅保留用户喜欢的文章。问题是我需要一个布尔值的字段值（isFavorite）来检查它是否是用户喜欢的文章之一，但这迫使我使用.then（）来获取此布尔值。不幸的是，我认为这个.then（）使我的.filter（）不过滤任何内容。

如果您想知道如何使用可在.filter（）条件下运行的表达式来获取此字段值，请告诉我

    export default function FavoriteCardlist() {
  const [favoriteArticles, setFavoriteArticles] = useState([]);
  const [uid, setUid] = useRecoilState(userIDCheck);

  useEffect(() => {
    db.collection("articles").onSnapshot((snapshot) => {
      setFavoriteArticles(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          article: doc.data(),
        }))
      );
    });
  }, []);

  const favoriteArticlesList = favoriteArticles
    .filter((article) =>
      db
        .collection("users")
        .doc(uid)
        .collection("favoriteArticles")
        .doc(article.id)
        .get()
        .then((doc) => doc.data()?.isFavorite)
    )
    .map((article) => (
      <div key={article.id}>
        <h2>{article.article.title}</h2>
      </div>
    ));

  return <div className="cardlist">{favoriteArticlesList}</div>;

Answer 1

可能你是

.then((doc) => doc.data()?.isFavorite)

没有返回值，因为承诺只是在解决，因此为什么您的过滤器不起作用。

在“ favoriteArticles”集合中，每个文档中是否还包含“ isFavorite”字段？

如果已经针对用户存储了文章作为收藏夹，并且再次将其收藏夹，则听起来是多余的。看起来您正在请求所有文章，然后对它们进行过滤，这将花费更多且花费更长的时间。

如果这是针对单个页面的，并且您不需要所有文章，则可以对用户最喜欢的文章ID进行初始请求，然后使用构造的ID数组向articles集合进行请求。例如：

firestore()
        .collection("users")
        .doc(uid)
        .collection("favoriteArticles")
        .get()
.then(querySnapshot => {
 querySnapshot.forEach(documentSnapshot => {
// update state array with article id
    });
  });


firestore()
  .collection('articles')
  .where('id', 'in',[arrayOfFavoriteID's])
  .get()
  .then(querySnapshot => {
  // updateState for div to map through and render
  });

使用React Firebase添加到收藏夹时出现问题

1 个答案: