Почему форма дает неопределенные или пустые данные с помощью react-hook-формы?

#reactjs #material-ui

#реагирует на #материал-пользовательский интерфейс

Вопрос:

Это очень интересно для меня и как это может быть решено. Прямо сейчас у меня проблема с тем, что моя форма react hook получает неопределенные или пустые данные при отправке формы. Похоже, что зарегистрированное значение inp_firstname не распознается. Есть идеи, почему этот зарегистрированный ввод не имеет значения или данных?.

Цель: Когда я отправляю все, что я набираю на пользовательском вводе, значение будет выводиться через журнал консоли.

Вот моя анкета:

 lt;form onSubmit={handleSubmit(AddUserHandler)} gt;  lt;div style={{overflowY:'scroll', height:500}}gt;   lt;h2gt;Add Userlt;/h2gt;   lt;CustomInput {...register('inp_firstname')} name="inp_firstname" innerRef={register} hasTypo="true" typograph="First Name" fullWidth   sx={{backgroundColor:'#F3F3F3', borderColor:'#F3F3F3'}}gt;lt;/CustomInputgt;     lt;Grid sx={{mt:3}} direction="row" spacing={1} container justifyContent="space-between" gt;  lt;Grid container xs={6} item gt;  lt;CustomButton name="Cancel" fullWidth variant="outlined"   sx={{color:'#3167E9', border:'2px solid #3167E9',   borderRadius:'5px', fontSize:19, fontWeight:'700',   textTransform:'none', borderRadius:'0', height:50}}gt;  lt;/CustomButtongt;  lt;/Gridgt;  lt;Grid container xs={6} itemgt;  lt;CustomButton type="submit" name="Save" fullWidth variant="outlined"   sx={{color:'#3167E9', fontSize:19, fontWeight:'bold', textTransform:'none',   borderRadius:'0', height:50}}gt;  lt;/CustomButtongt;  lt;/Gridgt;  lt;/Gridgt;  lt;/divgt; lt;/formgt;  

Обработчик:

 const AddUserHandler = (val) =gt; {  console.log(val); }  

Ошибка:

 {inp_firstname: undefined}  

Комментарии:

1. lt;form onSubmit={handleSubmit(AddUserHandler)} gt; вызывает функцию handleSubmit при каждом рендеринге. Попробуйте вместо этого lt;form onSubmit={() =gt; handleSubmit(AddUserHandler)} gt;