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

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)

没有返回值，因为 Promise 正在解决，因此您的过滤器无法正常工作。

在您的“favoriteArticles”集合中，每个文档是否也有一个“isFavorite”字段？

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

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

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
  });