在列表firestore集合ReactJs的顶部显示最新文档

ubof19bj 于 2023-05-28 发布在 React

关注(0)|答案(2)|浏览(101)

我有一个表的条目列表，目前我正在从firestore集合中获取数据;每当我添加一个新的文件到列表中，它出现在底部，有没有一种方法来显示最近添加的文件在我的表在顶部，而不是在底部出现的条目？
下面是获取并显示新文档到我的表的代码：

useEffect(() =>{
// LISTEN (REALTIME)
const unsub = onSnapshot(
  collection(db, "users"),
  (snapShot) => {
    let list = [];
    snapShot.docs.forEach((doc) => {
      list.push({ id: doc.id, ...doc.data() });
    });
    setData(list);
  },
  (error) => {
    console.log(error);
  }
);

return () => {
  unsub();
};
}, []);

下面是向我的表中添加新文档的代码：

const handleAdd = async(e) => {
      e.preventDefault();
      // this is the add function to add a new doc
      if(isEmpty(id)){
        await addDoc(collection(db, "users"), {
          ...userInfo,
          timeStamp: serverTimestamp(),
        });    
      } else{
      // this is to update a list 
        await setDoc(doc(db, "users/" + id), {
          ...userInfo,
          timeStamp: serverTimestamp(),
        });    
      }
      navigate("/users")
  }

reactjs

来源：https://stackoverflow.com/questions/76346021/display-the-latest-document-at-the-top-of-a-list-firestore-collection-reactjs

2条答案

按热度按时间

disbfnqx1#

只需将新数据放在列表的第一位即可：通过使用

list = [{ id: doc.id, ...doc.data() }, ...list]

全码

useEffect(() =>{
// LISTEN (REALTIME)
const unsub = onSnapshot(
  collection(db, "users"),
  (snapShot) => {
    let list = [];
    snapShot.docs.forEach((doc) => {
      list = [{ id: doc.id, ...doc.data() }, ...list]
     
    });
    setData(list);
  },
  (error) => {
    console.log(error);
  }
);

return () => {
  unsub();
};
}, []);

赞(0）回复(0）举报 2023-05-28

e4eetjau2#

下面是解决方案：-
在排序列表中的数据以显示最新的方面，你要做的是在新添加的所有文档时为它们分配时间戳，然后查询数据以按升序或降序显示时间戳列表，下面的代码解释了这一点：

useEffect(() =>{
    // LISTEN (REALTIME)
    const collectionRef = collection(db, "users");
    const q = query(collectionRef, orderBy("timeStamp", "asc"))
    const unsub = onSnapshot(
      q,
      (snapShot) => {
        let list = [];
        snapShot.docs.forEach((doc) => {
          list = [{ id: doc.id, ...doc.data() }, ...list]
         
        });
        setData(list);
      },
      (error) => {
        console.log(error);
      }
    );
    
    return () => {
      unsub();
    };
    }, []);

赞(0）回复(0）举报 2023-05-28

我来回答

在列表firestore集合ReactJs的顶部显示最新文档

2条答案

相关问题

热门标签

最新问答