Tengo un componente que proporciona doble enlace para la entrada. Así que quiero transmitir datos al componente principal de 2 maneras: onBlur y en el botón Enter. La función que escucha el evento de desenfoque funciona correctamente, pero otra función que tiene la misma funcionalidad no ve los datos de estado. ¡No puedo arreglar este error por 2 horas!

 function NewFriend({ cancel = f => f, addNewFriend = f => f }) { const [inputProps, resetValue] = useInput(''); useEffect(() => { console.log(inputProps.value) // works correctly }, [inputProps.value]) const blur = () => { // it's works correctly addNewFriend(inputProps.value) resetValue('') } const keyDownHandlers = event => { console.log(inputProps.value) // printing empty string if (event.code === 'Enter') { addNewFriend(inputProps.value) resetValue('') }; if (event.code === 'Escape') cancel(); } useEffect(() => { document.addEventListener('keydown', keyDownHandlers) return () => document.removeEventListener('keydown', keyDownHandlers) }, []) return ( <div className='add-people'> <input type='text' className='new-friend-input' onBlur={blur} autoFocus {...inputProps} /> </div> ) }

gancho useInput:

 export const useInput = initialValue => { const [value, setValue] = useState(initialValue) return [ { value: value, onChange: event => setValue(event.target.value) }, () => setValue(initialValue) ]}