const ID = useSelector((state) => state.userDetail.userID); const [postItem, setpostItem] = useState([]); useEffect(() => { const q = query( collection(firestore, "latestPost"), where("userID", "==", ID) ); onSnapshot(q, (querySnapshot) => { querySnapshot.forEach((doc) => { postItem.push({ ...doc.data(), id: doc.id }); }); }); }, []);Quería leer datos de firebase y configurar mi useState con una matriz vacía e incluso después de que los datos están en la matriz, la pantalla aún muestra una matriz vacía, necesito actualizar manualmente la pantalla para ver el cambio.
No deberías estar presionando directamente a postItem . Deberías estar usando setPostItem . También creo que debe agregar postItem al final de useEffect entre corchetes.
Así que tal vez algo como
useEffect(()=> { const q = query( collection(firestone, "latestPost"), where("userId", "==", ID) ); onSnapshot(q, (querySnapshot) => { querySnapShot.forEach((doc) => { setPostItem([...postItem, {...doc.data(), id:doc.id}]) }); }); }, [postItem]); Básicamente, eso significa que useEffect se ejecutará nuevamente una vez que haya setPostItem y también porque useState ha cambiado, actualizará la página.
Creo que así fue como está diseñado. ¡Sin embargo, que alguien me corrija si mi lógica es incorrecta!
La única forma en que reacciona sabe que necesita renderizarse nuevamente es si configura State. Mutar la matriz existente no provocará una nueva representación. Además, no olvide devolver la función de cancelación de suscripción para que su oyente de instantáneas pueda ser eliminado cuando el componente se desmonte:
useEffect(() => { const q = query( collection(firestone, "latestPost"), where("userId", "==", ID) ); const unsubscribe = onSnapshot(q, (querySnapshot) => { const newItems = querySnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }); setpostItem(newItems); }); return unsubscribe; }, []);