Tengo este componente:
export const DashboardPage = () => { const [mounted, setMounted] = useState(false); const [currentNumber, setCurrentNumber] = useState(null); const [insertedNumber, setInsertedNumber] = useState(null); const [result, setResult] = useState(null); const [arrayNumbers, setArrayNumbers] = useState([]); useEffect(() => { const rnd = randomNumber(); if (!mounted) { setCurrentNumber(rnd); setMounted(true); } }, [mounted]); const handleChange = (e) => { setInsertedNumber(e.target.value); } const handleClick = (e) => { e.preventDefault(); arrayNumbers.push(insertedNumber); setArrayNumbers(arrayNumbers); setResult("Oops, ritenta! era " + currentNumber) if (parseInt(insertedNumber) === parseInt(currentNumber)) { setResult("EVVIVA hai vinto!"); } } const handleOnSubmit = (e) => { e.preventDefault(); } return ( <> <h2>Storico tentativi: {arrayNumbers.map(e => e)}</h2> <h2>La soluzione è: {currentNumber}</h2> <Form onSubmit={handleOnSubmit}> <Form.Group controlId="formGTN"> <Form.Label>Guess the number:</Form.Label> <Form.Control type="text" onChange={handleChange} /> </Form.Group> <Button variant="primary" type="submit" onClick={handleClick} label="Is it?" /> </Form> <h1>{result}</h1> </> ) } export default DashboardPage;Es un simple juego de "Adivina el número".
Tengo el problema de que:
En la primera carga de la página, puedo ingresar en arrayNumbers el único número que inserté.
Desde el segundo y otros intentos, cuando CHANGE el valor dentro de la entrada, entonces cuando elimino el número anterior, obtengo una actualización de estado y tengo los números anteriores (y encendidos). Como si "estado" es "atrás" de un intento.
Puedo ver este comportamiento también en el complemento Redux de Chrome. El estado se actualiza SOLO un paso más.
Podría mover el empuje a la matriz en onChange, pero... Si inserto un número de 2 dígitos, obtengo 2 insertos en la matriz (44 serán "4" y "4").
¡Gracias!
Nunca debe mutar el estado y/o actualizar el estado sin setState . En JavaScript, el método Array.push() muta la matriz original. Entonces, en tu ejemplo, arrayNumbers pero debes agregar un nuevo elemento a la matriz sin actualizar el original.
Además, escuchar el evento onSubmit es suficiente, no tiene que agregar el evento onClick a su botón de envío. Puede mover todo, desde handleClick a handleOnSubmit .
export const DashboardPage = () => { const [mounted, setMounted] = useState(false); const [currentNumber, setCurrentNumber] = useState(null); const [insertedNumber, setInsertedNumber] = useState(null); const [result, setResult] = useState(null); const [arrayNumbers, setArrayNumbers] = useState([]); useEffect(() => { const rnd = randomNumber(); if (!mounted) { setCurrentNumber(rnd); setMounted(true); } }, [mounted]); const handleChange = (e) => { setInsertedNumber(e.target.value); }; const handleOnSubmit = (e) => { e.preventDefault(); setArrayNumbers([...arrayNumbers, insertedNumber]); if (parseInt(insertedNumber, 10) === parseInt(currentNumber, 10)) { setResult('EVVIVA hai vinto!'); } else { setResult('Oops, ritenta! era ' + currentNumber); } }; return ( <> <h2>Storico tentativi: {arrayNumbers.map((e) => e)}</h2> <h2>La soluzione è: {currentNumber}</h2> <Form onSubmit={handleOnSubmit}> <Form.Group controlId="formGTN"> <Form.Label>Guess the number:</Form.Label> <Form.Control type="text" onChange={handleChange} /> </Form.Group> <Button variant="primary" type="submit" label="Is it?" /> </Form> <h1>{result}</h1> </> ); };Para el componente anterior, puede probar estos cambios en la función handleClick:
const handleClick = (e) => { e.preventDefault(); let newArr = [...arrayNumbers]; newArr.push(insertedNumber); setArrayNumbers(newArr); setResult('Oops, ritenta! era ' + currentNumber); if (parseInt(insertedNumber) === parseInt(currentNumber)) { setResult('EVVIVA hai vinto!'); } };