Cuando ingreso el primer carácter en el elemento de entrada, aparece "cadena vacía".
function form(props) { // function getData(e){ // e.preventDefault() // console.log(e.target[1].value) const [title, setTitle] = useState("") function getTitle(e){ setTitle(e.target.value) console.log(title) //First time shows "empty string" } return ( <form > <div> <label >Title</label> <input type="text" name="title" onChange={getTitle} /> </div> </form>)A mi modo de ver, ingreso un carácter en el elemento de entrada, se dispara el evento "onChange", se ejecuta la función getTitle, establece la variable "título", que está enganchada al gancho useState, y luego consuelo con el resultado . Siguiendo este razonamiento, espero ingresar el primer carácter. En su lugar, obtengo "cadena vacía". A partir del segundo carácter la consola imprime los caracteres.
Con la función "onInput" sucede lo mismo.
¿Cómo solucionar esto y por qué sucede?
El estado de configuración es asíncrono, por lo que su console.log se ejecuta antes de que se establezca el estado. Si usa un gancho useEffect para ver el estado, debería ver el valor. El useEffect se ejecuta después de la renderización, por lo que verá su información de estado actualizada en ese momento.
useEffect(() => { console.log(title); }, [title]);setTitle asíncrono, debe verificar los cambios de title en useEffect
useEffect(() => { console.log(title); }, [title])