const user = useSelector((state) => state.user); const [allPost, setAllPost] = useState([]); const getAllPost = async () => { const q = query(collection(db, "posts", "post", user.user.email)); const querySnapshot = await getDocs(q); querySnapshot.forEach((doc) => { console.log(doc.data()); const newPost = doc.data(); setAllPost([...allPost, newPost]); }); }; useEffect(() => { getAllPost(); }, []);Tengo cuatro documentos en mi firestore pero setState solo devuelve uno, aunque al usar forEach loop puedo ver los cuatro objetos
El problema es que cada vez que usas
setAllPost([...allPost, newPost]); allPost sigue siendo el valor anterior porque las actualizaciones de valores de estado son asíncronas ; allPost no contendrá el nuevo valor hasta el próximo renderizado.
Puede usar la versión funcional del setter de estado...
querySnapshot.forEach(doc => { setAllPost(prev => prev.concat(doc.data())); });o simplemente cree una matriz separada y configúrelos todos a la vez
setAllPost(querySnapshot.docs().map(doc => doc.data()));Personalmente, prefiero lo segundo.