[EDITAR]: se agregaron un poco más de detalles al código de muestra.
Estoy tratando de construir un componente de temporizador. Este es mi código.
const Timer = () => { let startTime; const handleStart = () => { startTime = Date.now(); console.log(startTime); }; const handleEnd = () => { console.log(startTime); }; return ( <> <button onClick={handleStart} > Start timer </button> <button onClick={handleEnd} > End timer </button> </> ) } handleStart es el controlador de clics para un botón y handleEnd es el controlador de clics para el segundo botón.
Cuando hago clic en el primer botón para iniciar el temporizador, todo funciona y el valor de startTime se registra en la consola, por lo que sé que se ha asignado. Sin embargo, cuando hago clic en el segundo botón para detener el temporizador, no registra startTime . En cambio, la salida de la consola no está undefined .
No tengo idea de por qué sucede esto. ¿Alguien puede explicar por qué este código no funciona?
En React, no puede simplemente asignar un valor a una variable, debe establecer el estado, como en el siguiente ejemplo:
import { useState } from "react"; import "./styles.css"; export default function App() { const [startTime, setStartTime] = useState(); const handleStart = () => { const dateNow = Date.now(); console.log(dateNow); setStartTime(dateNow); }; const handleEnd = () => { console.log(startTime); }; return ( <div className="App"> <button type="button" onClick={handleStart}> Start </button> <button type="button" onClick={handleEnd}> End </button> <p>{startTime}</p> </div> ); }