Mis funciones no siguen el uso síncrono de React.
No sé por qué la función handleSum
no suma el valor actualizado que proviene de handleInput
cuando invoco la función handleAll
a través del evento de entrada onChange
. Parece que suma con el valor anterior. ¿Puede arrojar algo de luz aquí? ¡Gracias!
Aquí la parte de JS:
const card = () => {
// gancho definido
const [input, setInput] = React.useState({
p1h1: "",
p1h2: "",
});
const [result, setResult] = React.useState("")
// manejar cambio de entrada
const handleInput = function(e){
setInput({
...input,
[e.target.name]: e.target.value
});
};
// manejar suma
const handleSum = function(){
const { p1h1, p1h2 } = input;
setResult(Number(p1h1) + Number(p1h2));
}
// manejar resultado de jugador
const handleAll = function (e) {
handleInput(e)
setTimeout (()=> {handleSum()},1000) // Inserté este setTimeout para asegurarme doblemente de que esto se está ejecutando después de la función anterior pero no funcionó.
}
}
Aquí la parte de HTML:
<input name="p1h1" value="{input.p1h1}" onchange="{handleAll}" type="number" min="0">
<input name="p1h2" value="{input.p1h2}" onchange="{handleAll}" type="number" min="0">
<h2>Resultado de la suma: {result}</h2>
davy.ai
Parece que el problema es que la función
handleSum
se está invocando antes de que la funciónhandleInput
tenga la oportunidad de actualizar el estado deinput
. La funciónhandleInput
es asíncrona, por lo que es posible que la funciónhandleSum
se esté invocando antes de que el estado deinput
se haya actualizado.Podrías intentar usar el gancho
useEffect
para asegurarte de que la funciónhandleSum
se invoque después de que la funciónhandleInput
tenga la oportunidad de actualizar el estado deinput
. Por ejemplo:Esto asegurará que la función
handleSum
se invoque después de que se haya actualizado el estado deinput
.