Estoy obteniendo datos de Firestore con un límite establecido de datos. En la parte inferior, tengo un botón que está vinculado a una función FetchMore y quiero que se carguen más datos y se agreguen al estado de ElectroniquePosts cuando hago clic en ese botón.
Feed.js
function Feed() { const [ElectroniquePosts, setElectroniquePosts] = useState([]); const countRef = useRef(null); useEffect(() => { const unsubscribe = onSnapshot( query( collection(db, "ElectroniquePosts"), orderBy("timestamp", "desc"), limit(1) ), (snapshot) => { setElectroniquePosts(snapshot.docs); } ); return () => { unsubscribe(); }; }, [db]); countRef.current = ElectroniquePosts.length; console.log("Number of docs : " + countRef.current); const FetchMore = (e) => { e.preventDefault(); const unsubscribe = () => onSnapshot( query( collection(db, "ElectroniquePosts"), orderBy("timestamp", "desc"), startAfter(countRef.current), limit(1) ), (snapshot) => { setElectroniquePosts(snapshot.docs); } ); return unsubscribe(); }; return ( <> {ElectroniquePosts.length === 0 ? ( <div> </div> ) : ( <> <div className="pb-20 flex flex-wrap justify-center "> </div> <div > <button onClick={FetchMore}>Load More </button> </div> </> )} </> ); } export default Feed;Usando la siguiente referencia , se me ocurrió un código de trabajo y así es como se ve ahora
Feed.js
const FetchMore = async () => { const FetchMoreElectronique = async () => { const first = query( collection(db, "ElectroniquePosts"), orderBy("timestamp", "desc"), limit(ElectroniquePosts.length) ); const documentSnapshots = await getDocs(first); const lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1]; const next = query( collection(db, "ElectroniquePosts"), orderBy("timestamp", "desc"), startAt(lastVisible), limit(2) ); const DocSnapshotNext = await getDocs(next); setElectroniquePosts(DocSnapshotNext.docs); }; FetchMoreElectronique(); };