Estoy trabajando en un cuadro de entrada que toma un valor para la mano de obra, lo establece como estado y luego hace cálculos basados en el número. Sin embargo, me encuentro con un problema en el que el estado parece actualizarse con un retraso en la entrada. Tengo otras dos entradas que están estructuradas de manera similar y no tienen el problema. No estoy seguro de qué está causando esto.

Este es el resultado que se ve al comparar console.log(labor) con console.log(e.target.value) (que se encuentra en el segundo bloque de código).

 function ProductCalculator() { const [labor, setLabor] = useState(70); return ( <div> <ProjectSelector labor={labor} setLabor={setLabor} /> ); }

 function ProjectSelector({ labor, setLabor, }) { function LaborInput() { const [name, setName] = useState(""); function handleChange(e) { setName(parseFloat(e.target.value)); setLabor(parseFloat(e.target.value)); console.log(e.target.value); //value is correct console.log(labor); //value is delayed } return ( <div className="col-xs-2" id="labor-input"> Hourly Labor Rate <input type="number" onChange={handleChange} value={labor} /> </div> ); } return ( <div" className="row"> <div>{LaborInput()}</div> </div> ); }