hola, tengo que actualizar mi página para ver el efecto de la persona que agrega un evento al calendario:
mi codigo es
const handleDateClick = async (DateClickArg) => { if (DateClickArg) { const title = prompt("Enter title", DateClickArg.dateStr); // allows user to put a title in // making object const event = { title: title ? title : DateClickArg.dateStr, start: DateClickArg.date, allDay: true, }; allEvents.push(event); const db = fire.firestore(); let currentUserUID = fire.auth().currentUser.uid; const doc = await fire .firestore() .collection("userCalendar") .doc(currentUserUID) .get(); db.collection("userCal/" + currentUserUID + "/activities").add({ event }); } };y mi getuserinfo es:
const getUserInfo = async () => { let currentUserUID = fire.auth().currentUser.uid; const qSnap = await fire .firestore() .collection("userCal") .doc(currentUserUID) .collection("activities") .get(); const data = []; data = qSnap.docs.map((d) => ({ id: d.id, title: d.data().event.title, start: d.data().event.start.toDate(), allDay: d.data().event.allDay, ...d.data(), })); //setData(data) console.log(data); setData([...data]); }; useEffect(() => { let mounted = false; if (!mounted) { getUserInfo(); } return () => { mounted = true; }; }, []);¿Dónde estoy yendo mal con mi efecto de uso? ¿Hay alguna forma de que los datos se actualicen en el navegador una vez que se agreguen a firebase? estoy usando el calendario completo de reacción
El uso de get() solo devuelve una instantánea de un momento dado de sus datos. Si desea escuchar actualizaciones en tiempo real , use .onSnapshot() en su lugar.
También deberá asegurarse de darse de baja de las actualizaciones cuando se limpie su componente.
useEffect(() => { const currentUserUID = fire.auth().currentUser.uid; return fire .firestore() .collection("userCal") .doc(currentUserUID) .collection("activities") .onSnapshot(({ docs }) => { setData( docs.map((doc) => { const data = doc.data(); return { id: doc.id, title: data.event.title, start: data.event.start.toDate(), allDay: data.event.allDay, ...data, }; }) ); }); }, []); .onShapshot() devuelve una función de cancelación de suscripción , por lo que devolverla desde su gancho de efectos la ejecutará cuando su componente esté desmontado.
Suponiendo que su llamada a firebase esté bien, hay un error dentro de su llamada useEffect . Está configurando incorrectamente la variable montada, se supone que es falsa cuando se destruye su componente y verdadera después de que se procesa su componente. Además, para evitar comportamientos inesperados, recomiendo usar el gancho useRef para verificar eso.
function Component() { const isMounted = useRef(false) useEffect(() => { isMounted.current = true; if (isMounted) { getUserInfo(); } return () => { isMounted.current = false } }, []); ... } export default Component;