0

La idea del componente funcional es que cada un segundo se actualice la 'fecha' y la 'edad', la edad se actualiza bien, pero no consigo que la fecha se actualice.

const ClockFunction = () => {
  const defaultState = {
    fecha: new Date(),
    edad: 0,
    nombre: "Juan",
    apellidos: "Martinez",
  };

  const updateUser = () => {
    return setUser({
        fecha: user.fecha,
        edad: user.edad + 1,
        nombre: user.nombre,
        apellidos: user.apellidos,
    });
  };

  const [user, setUser] = useState(defaultState);

  useEffect(() => {
    const intervalAge = setInterval(() => {
        updateUser();
    }, 1000);
    return () => {
        clearInterval(intervalAge);
    };
  });

  return (
    <div>
        <h2>
            Hora Actual:
            {user.fecha.toLocaleTimeString()}
        </h2>
        <h3>
            {user.nombre} {user.apellidos}
        </h3>
        <h1>Edad: {user.edad}</h1>
    </div>
  );
  };

1 respuesta 1

0

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>
  )
}
2
  • Ya esta editado :)
    – Tucu
    Commented el 17 mar. 2023 a las 16:17
  • ya está respondido :D Commented el 17 mar. 2023 a las 16:27

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.