Estoy usando el setter useState de react para manejar la entrada del usuario. Funciona, excepto por este error. Por alguna razón, no detecta el primer carácter que ingreso en el campo de entrada de texto. Tiene un controlador onChange adjunto. También lo he registrado en la consola dentro del controlador para cerrar la sesión sea cual sea la entrada. Y puedo ver que el primer carácter siempre estará vacío, luego, cualquier carácter posterior será registrado por el registro de la consola. En otras palabras, si ingreso 4 caracteres, solo lo registrará como 3 caracteres, y siempre será el primer carácter que se ignore. Por favor vea mi código abajo.
const [input, setInput] = useState(''); const handleInput = (value) => { setInput(value); console.log(input) }; <ReactCodeInput className={classes.reactCodeInput} onChange={handleInput} value={input} fields={4} type="number" />El setInput(valor); no es sincrónico, por lo que si coloca un registro de consola después de eso para imprimir el valor, mostrará el valor anterior. Más información aquí useState set method no refleja el cambio inmediatamente
Además, el código pin no existe, creo que ese valor debería ser la entrada.
Hice lo mismo en este sandbox https://codesandbox.io/s/peaceful-shaw-t8260h?file=/src/App.js:228-233 puedes echarle un vistazo.
Como lo mencionó Deivid, setInput(value) no es síncrono. Si desea acceder al valor de entrada tan pronto como se cambie, pruébelo usando useEffect.
const [input, setInput] = useState(''); useEffect (() => { console.log("New updated input value:", input) },[input]}; const handleInput = (value) => { setInput(value); console.log(input) //Will log old value }; <ReactCodeInput className={classes.reactCodeInput} onChange={handleInput} value={input} fields={4} type="number" />