0

No se si es la pregunta correcta, pero el tema es el siguiente.

Estoy trabajando con el constructor new Date(); en React y llegué a un punto en el que no puedo obtener el valor adecuado de la variable que guarda las fechas.

En principio, parto de una fecha actual. A esa fecha actual le aplico un contador básico de meses, para que me devuelva los meses siguientes hasta que se transforme en el año que sigue. Hasta ahí, todo sale perfecto. El tema es que tengo que tomar el número de mes con getMonth(); desde una variable nueva donde pongo el resultado de ir agregando los meses al renderizado.

Esto es lo que tengo: Componente Calendar, donde muestro los resultados de los cálculos.

import React, { useEffect } from 'react'
import useTimeDos from '../hooks/useTime';

const Calendar = () => {

    const { 
        current,
        newDate,
        month,
        newMonth,
        monthString,
        nextMonth
    } = useTimeDos();

    useEffect(() => {

    }, []);
    

    return (
        <div>
            <div><h1>Calendar</h1></div>
            Current date: { current.toDateString() }
            <br />
            New date: { newDate.toDateString() }
            <hr />
            Month: { month }
            <br />
            Month String: { monthString }
            <br />
            New Month: { newMonth }
            <br />
            <button onClick={() => nextMonth()}>Next Month</button>
        </div>
    )
}

export default Calendar;

Este es mi Custom Hook donde hago los cálculos de las fechas:

import { useEffect, useState, useMemo } from 'react';

const CalendarHook = () => {

    const current = useMemo(() => new Date(), []);

    const today = `${current.getDate()}/${current.getMonth() + 1}/${current.getFullYear()}`;

    const [newDate, setNewDate] = useState(current);

    const [month, setMonth] = useState(current.getMonth());
    const [newMonth, setNewMonth] = useState(newDate.getMonth());

    const [monthString, setMonthString] = useState("");

    const [monthPosition, setMonthPosition] = useState(month);

    useEffect(() => {

        const months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];

        setMonthString(months[monthPosition]);

    }, [current, monthPosition]);

    const nextMonth = () => {
        setMonth(month + 1);
        setNewDate(new Date(current.getFullYear(), month + 1, current.getDate()));
        setNewMonth(newDate.getMonth());
        setMonthPosition(newDate.getMonth());
    }

    return {
        current,
        today,
        newDate,
        month,
        newMonth,
        monthString,
        nextMonth
    }

}

export default CalendarHook;

Para resumir, lo que me pasa es que cuando le doy a botón Next Month, el número del mes queda igual, y solo después de darle de nuevo, empieza a aumentar, es decir, queda seteada con los valores anteriores.

Estando en el mes de JUNIO:

• La variable current no hay problemas, solo arma la fecha actual. La variable newDate es la que voy armando a medida que hago las operaciones.

• La variable month empieza en 5, y luego de darle el botón, corre a 6, correspondiente a JULIO, eso funciona bien. Esta variable muestra la cantidad de meses que se van sumando a la fecha actual.

• La variable monthString recorre un array de los meses para ir mostrando el nombre de cada mes, esta variable queda "atrasada", seteando el valor anterior.

• La variable newMonth, tomaría el mes de la variable newDate para pasar el nuevo valor del mes, y así poder identificarlo en el array (esto no está armado todavía), y también setea el valor anterior y no el que muestra de newDate, solo al darle nuevamente, muestra el mes siguiente, pero sigue estando atrasado por un mes.

Así se vería

En la imagen se puede ver que la New Date muestra el mes de Diciembre, el month: 11. Esto está bien, si se sigue dando al botón, sigue sumando valores, es decir, 12 para Enero 2023, 13 para Febrero 2023, y así.

Lo que está mal es el New Month, que muestra 10, y debería monstrar 11, de manera de que si nos posicionamos en Enero de 2023, muestre 0.

Espero que se entienda. Muchas gracias.

1 respuesta 1

0

Yo creo que el problema está en la función nexMonth.

const nextMonth = () => {
    setMonth(month + 1);
    setNewDate(new Date(current.getFullYear(), month + 1, current.getDate()));
    setNewMonth(newDate.getMonth());
    setMonthPosition(newDate.getMonth());
}

En la linea en la que seteas newMonth, newDate no es el valor que acabas de modificar, aún es el anterior, ya que es asíncrono. Yo crearía una constante al principio de la función y luego haría el setnewdate en torno a esa variable y el setnewmonth y setmonthposition también.

const nextMonth = () => {
    const date = new Date(current.getFullYear(), month + 1, current.getDate());
    setMonth(month + 1);
    setNewDate(date);
    setNewMonth(date.getMonth());
    setMonthPosition(date.getMonth());
}
1
  • Funciona con esto, el problema que le veo es que si quiero setear el año a parte, este no se actualiza, lo mismo sucedería si quiero aumentar solo los días. En algún momento pasaría el mes y el año y no avanzarían ni el mes ni el año. de ahí que estaba seteando la variable por fuera. De la otra forma, funciona, pero tengo ese atraso. el 16 jun. 2022 a las 1:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.