Problema: no hay salida de cadena la primera vez que escribo texto. Esto está causando que el último carácter de lo que ingrese en la salida no aparezca. ¿Por qué es esto?
Algún estado - Centrándose en la propiedad del name
const [options, setOptions] = useState({ name: '', signOff: '' });Aporte
<input type="text" placeholder="Enter first name" name="name" id="name" onChange={(e) => handleNameChange(e.target.value)} />Función para disparar después del cambio de entrada
const handleNameChange = (name: string) => { setOptions({ ...options, name }); console.log(options); }; Ejemplo de salida de la consola después de escribir "hola" - ¿Por qué la cadena vacía para la propiedad de name ?
{name: '', signOff: ''} options.tsx:17 {name: 'h', signOff: ''} options.tsx:17 {name: 'he', signOff: ''} options.tsx:17 {name: 'hel', signOff: ''} options.tsx:17 {name: 'hell', signOff: ''} options.tsx:17Su comportamiento esperado, porque setStates son asincrónicos, por lo que cuando registra la variable de estado inmediatamente después de configurarla, registra el valor anterior, no el actualizado
Si solo desea registrar los cambios de estado, mueva console.log() a useEffect hook
const handleNameChange = (name: string) => { setOptions({ ...options, name }); console.log(options); }; useEffect(() => { console.log(options); }, [options]);Puede agregar la variable de opciones como el segundo parámetro para usarEffect. Esto significa que en cada cambio de estado de esta variable se disparará esta función.
useEffect(() => { console.log(options); }, [options]);Así es como lo hago y no he encontrado ningún problema de este tipo. También puede usar la misma función para cualquier otra entrada, no solo para el nombre.
<input type="text" placeholder="Enter first name" name="name" id="name" onChange={handleChange} /> const handleChange = (e) => { setOptions({ ...options, [e.target.name]: e.target.value }); };