Por favorCuando estableces que el estado sea defaultState
, muéstranosestás estableciendo un valor estático de new Date()
a la propiedad fecha
, donde tomará el códigovalor del momento en que se llamó (o sea, en el useState
). En el interval, solo estás llamando al updateUser
y, por ende, reemplazas los mismos valores estáticos al estado (menos edad
que le sumas 1).
Puedes obtener lo que buscas y minimizar líneas de código usando para ese componentedentro de useEffect
el setUser
en su versión de arrow function junto al spread operator
ya que buscas setear el nuevo estado usando el estado anterior. (En la doc oficial de React se encuentra esto). Tu useEffect
quedaría así:
const ClockFunction = () => {
const defaultState = {
fecha: new Date(),
edad: 0,
nombre: 'Juan',
apellidos: 'Martinez',
}
const [user, setUser] = useState(defaultState)
useEffect(() => {
const intervalAge = setInterval(() => {
setUser((curr) => ({
...curr,
edad: curr.edad + 1,
fecha: new Date(),
}))
}, 1000)
return () => {
clearInterval(intervalAge)
}
})
return (
<div>
<h2>
Hora Actual:
{user.fecha.toLocaleTimeString()}
</h2>
<h3>
{user.nombre} {user.apellidos}
</h3>
<h4>Edad: {user.edad}</h4>
</div>
)
}