Estoy trabajando con Firebase para recuperar datos de Firestore, donde quiero obtener dos grupos de información, uno contendría los eventos "activos", cuya fecha de finalización es posterior a la fecha actual, y las fechas "caducadas", que fechas de finalización son anteriores a nuestra fecha actual. (Mis fechas se almacenan como M/D/YYYY, p. ej.: 6/7/2022
Variables que estoy usando:
const [events, setEvents] = useState([]); const [expEvents, setExpEvents] = useState([]); const today = new Date().toLocaleDateString();Mi efecto de uso:
useEffect(() => { console.log("Fetching Events..") console.log(today) setLoading(true) const getEvents = async () => { const data = await getDocs(eventsRef); setEvents(data.docs.map((event) => ({...event.data()}))) setExpEvents(data.docs.map((event) => ({...event.data()}))) } getEvents() setExpEvents(expEvents.filter(event => Date.parse(event.enddate) < Date.parse(today))) console.log("Fetched Events!") setLoading(false) //done console.log(events) }, [])El problema que tengo es que parece que esta declaración de filtro es incorrecta o se anula con otra cosa, pero parece que no puedo entender por qué. Cualquier ayuda es apreciada.
Bueno, está utilizando una función asíncrona sin esperar a que termine. Tenga en cuenta que async no debe usarse para las devoluciones de llamada useEffect , por lo que debe refactorizar su código o usar una promesa con then , eche un vistazo aquí Advertencias de gancho de reacción para la función asíncrona en useEffect: la función useEffect debe devolver una función de limpieza o nada
Tenga en cuenta también que un console.log después de una actualización de estado no registraría el valor actualizado en ningún caso, registra el valor que tiene su estado cuando se ejecuta la función (la devolución de llamada useEffect , en este caso).