Skip to main content
Ya se añadió el código del componente.
Origen Enlace

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>
  )
}

Por favor, muéstranos el código que estás usando para ese componente

Cuando estableces que el estado sea defaultState, estás estableciendo un valor estático de new Date() a la propiedad fecha, donde tomará el valor 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 dentro 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>
  )
}
Origen Enlace

Por favor, muéstranos el código que estás usando para ese componente