Cuando registro array , obtengo la matriz correcta. Pero después, cuando trato de setNewArray(array) y luego registro newArray , me da una matriz vacía.
Esto es para una aplicación de citas en la que quiero comparar los tiempos disponibles y los tiempos tomados para generar una matriz con verdadero si se toma y falso si está disponible.
Esta es la parte de mi código donde trato de hacer esto:
const [value, onChange] = useState(moment().add(1, 'days')._d); const appointmentTimes = ['08', '09', '10', '11', '13', '14']; const [appointmentTaken, setAppointmentTaken] = useState([]); const appointments = []; const selectedTime = '08'; useEffect(() => { const array = []; // Getting the taken appointments in database and storing them in an array const getAppointments = async () => { const querySnapshot = await getDocs(collection(db, 'appointments')); querySnapshot.forEach((doc) => { appointments.push(doc.id); }); // Comparing the appointmentTimes and appointments appointmentTimes.map((time) => { // This pushes true to array if in database and false if not array.push( appointments.includes( moment(value).format('YYYY-MM-DD-HH').slice(0, -2) + time ) ); }); }; getAppointments(); // This gives me an array = [true, true, true, false, true, true] which is correct according to the database console.log(array); setAppointmentTaken(array); // This gives me an empty array console.log(appointmentTaken); }, []);Todavía estoy aprendiendo y esto probablemente no sea una buena práctica. Cualquier consejo si es apreciado.
Parece que está actualizando el estado y luego registrando el estado antes de que tenga tiempo de actualizarse. Entonces se está actualizando, simplemente no se actualizará dentro de ese alcance. Podrías intentar configurarlo manualmente,
const [value, setValue] = useState([ 'values', 'etc' ])y luego iniciar sesión en useEffect y debería funcionar. O, alternativamente, porque supongo que querrá establecer su estado usando useEffect. Podría intentar agregar un onLoad={console.log(value)}.. a uno de sus componentes para ver este valor una vez que la página se haya cargado y se haya ejecutado useEffect.
La razón por la que obtiene un estado vacío cuando
console.log(appointmentTaken);es porque reaccionar está seleccionando el valor de las citas tomadas de este código, que es una matriz vacía
const [appointmentTaken, setAppointmentTaken] = useState([]);Ahora, cuando ejecuta esta línea, le imprime la matriz que esperaba que sea correcta
console.log(array);Pero eso no significa que reaccionar actualizará el estado de la variable cita Tomada inmediatamente ejecutando el
setAppointmentTaken(array);React procesa por lotes la actualización, por lo que sucede que cada estado tiene una cola a la que se agregan sus acciones y es cuando el componente vuelve a ejecutar esta cola. entonces es cuando su estado se actualiza y reaccionar se dará cuenta de que el estado ha cambiado, por lo que activará una nueva representación
Ahora, si desea verificar si el estado ha cambiado o no, puede hacer un console.log (appointmentTaken) después
const [appointmentTaken, setAppointmentTaken] = useState([]); console.log(appointmentTaken)