Tengo un componente llamado Fecha con tres variables . También tengo una función llamada setCurrentTimes que se supone que actualiza las variables cada vez que se llama con los valores actuales.
Llamo a la función dentro de useEffect de react que no tiene dependencias para actualizar las variables en el montaje del componente.
Aquí está el componente de fecha.
const Date = () => { var currentDate; var currentTime; var amOrPm; const setCurrentTimes = () => { currentDate = moment().format("d MMMM YYYY"); currentTime = moment().format(" h:mm:ss "); amOrPm = moment().format("a"); }; useEffect(() => { setCurrentTimes(); }, []); return ( <div className="Date flex__container-v"> {amOrPm === "pm" ? ( <div className="Moon__icon flex__container"> <img src={Assets.Moon} alt="Moon Icon" /> <p className="p__poppins Date__greeting">Good Evening</p> </div> ) : ( <div className="Sun__icon flex__container"> <img src={Assets.Sun} alt="Sun Icon" /> <p className="p__poppins Date__greeting">Good Morning</p> </div> )} <div className="Date__btm flex__container"> <p className="p__poppins">{currentDate}</p> <p className="p__poppins">{currentTime}</p> </div> </div> ); };El componente devuelve diferentes cosas dependiendo de las variables . Sin embargo, no está funcionando como se esperaba. Cuando trato de cerrar la sesión de las variables dentro de la declaración de devolución, me quedo sin definir.
No entiendo lo que estoy haciendo mal.
Respuesta corta: use el estado para arreglar esto.
Respuesta más larga:
Probablemente esté esperando que useEffect se ejecute antes de renderizar, pero este no es el caso.
useEffect siempre se llama después de la fase de renderizado del componente. Su ParentComponent consta de Input, Input y ChildComponent.
En su caso, está intentando mostrar variables que aún no están configuradas. Si tuviera que usar Estado en lugar de variables, su interfaz de usuario se volvería a representar después de configurar estos estados. Dado que está utilizando variables, su interfaz de usuario no se volverá a representar, lo que hace que siempre muestre los valores iniciales (que están vacíos).
ejemplo simplificado:
const Date = () => { const [currentDate,setCurrentDate] = React.useState(); useEffect(() => { setCurrentDate(moment().format("d MMMM YYYY")); }, []); return ( <div className="Date flex__container-v"> <div className="Date__btm flex__container"> <p className="p__poppins">{currentDate}</p> </div> </div> ); };