Estoy tratando de usar una declaración if en mi código donde quiero que 'abra' un Cuadro de calendario si la fecha de hoy ha ocurrido, así como también para los últimos días de apertura de mi calendario.
Aquí está mi código donde estoy usando un useEffect para publicarlo al cargar el componente React:
// Call on post method via axios useEffect(async () => { console.log(daysData); const daysDay = daysData.map((day) => day.day); console.log(daysDay); if (date + 1 >= daysDay) { // Url where to post await axios.post(`http://localhost:5001/open/chocolate`, { day: date, }); alert('New day is available to eat!'); } setOpenCalendarBox(''); }, []);
Estoy tratando de obtener una matriz que inicié unas líneas más arriba de la función useEffect (daysData) y quiero el valor del elemento 'día' dentro de los objetos dentro de la matriz y luego comparar la fecha de hoy si es igual o menor que daysDay (elemento de día dentro de daysData)
Aquí está el código para mi matriz:
// Here I initalize the array with useState const [daysData, setDaysData] = useState([]); // Here is the port I'm fetching my array from. useEffect(() => { fetch('http://localhost:5001/chocolates') .then((resp) => resp.json()) .then((data) => setDaysData(data)); }, []);
Y aquí está el código de fecha:
// Initiate new Date const current = new Date(); // Retrieve current day of the month const date = current.getDate();
Parece que no puedo conseguir el efecto que quiero. Básicamente, solo quiero ver si el día ha pasado o si es hoy, entonces quiero que se publique en '/ open/chocolate'.
Probablemente se deba a que el valor de daysData
se establece de forma asíncrona, pero el bloque useEffect
que depende de él no lo incluye como una dependencia. Por lo tanto, está invocando la lógica, que requiere que daysData
se complete de forma asincrónica, cuando el componente se carga en tiempo de ejecución. Entonces daysData
estará vacío.
Una solución es simplemente agregar daysData
en la matriz de dependencia, de modo que solo ejecute la lógica que esté allí una vez que la matriz se complete correctamente.
Por otro lado, está comparando un número con una matriz: lo que dará un resultado inesperado. Si desea que alguno de los días coincida con date + 1
, use daysDay.some(d => date + 1 >= d)
. Si desea que todos los días coincidan con date + 1
, use daysDate.every(d => date + 1 >= d)
.
useEffect(async () => { const daysDay = daysData.map((day) => day.day); // This needs to be fixed, see comment for options if (daysDay.some(d => date + 1 > d)) { // Url where to post await axios.post(`http://localhost:5001/open/chocolate`, { day: date, }); } setOpenCalendarBox(''); }, [daysData]);