const [theposts, setThePosts] = useState([]); const myPosts = query(collectionGroup(db, 'posts')); const unsub = onSnapshot(myPosts, (querySnapshot) => { querySnapshot.forEach((doc) => setThePosts({ post: doc.data() })) return unsub; }) const Posts = theposts.post; return ( <> <StatusBar barStyle = "dark-content" backgroundColor = {'#b300b3'} /> <SafeAreaView style={[styles.container, {marginTop: 5}]}> <Header navigation = {navigation} /> <Stories /> <ScrollView> {Posts.map((post, index) => ( <Post post={post} key = {index} /> ))} </ScrollView> { /* <BottomTabs icons={bottomTabsIcons} /> */ } </SafeAreaView> </> )Parece que no hay mejor manera de escribir esto, pero aun así, da un error (1): indefinido no es una función (near'... Post.map') O error (2): theposts.postes no lo es Una función. theposts.postes no está definido
Obtener posts de Cloud Firestore es un efecto secundario y se debe realizar dentro de un gancho useEffect .
async function getPosts() { const query = query(collectionGroup(db, "posts")); const querySnapshot = await getDocs(query); let posts = []; querySnapshot.forEach((doc) => { posts.push(doc.data()); }); setPosts(posts); } useEffect(() => { // Fetch post documents when component mounts getPosts(); }, []);Luego refactorice JSX como se muestra a continuación
return ( <> <StatusBar barStyle = "dark-content" backgroundColor = {'#b300b3'} /> <SafeAreaView style={[styles.container, {marginTop: 5}]}> <Header navigation = {navigation} /> <Stories /> <ScrollView> {posts.map((post, index) => ( <Post post={post} key = {index} /> ))} </ScrollView> </SafeAreaView> </> )