Блог

Главная - Вопросы по программированию - Инициализация значений по умолчанию формы React hook с использованием состояния Redux

Инициализация значений по умолчанию формы React hook с использованием состояния Redux

#reactjs #redux #react-redux #material-ui #redux-toolkit

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

Вопрос:

Мне сложно присвоить значение по умолчанию форме React hook с использованием объекта React Redux.

Я использую react-hook-form, Redux toolkit и materiauli. Похоже, что проблема связана с текстовым полем materialui, но я все еще не могу ее решить.

Инициализация

 const dispatch = useDispatch()
const category = useSelector(state => state.inventory.categories.category)

useEffect(() => {
  dispatch(getCategoryData(id))
}, [])

Инициализация формы React Hook

 const { register, handleSubmit, reset } = useForm({
  defaultValues: {
    name: category.name
  }
})

JSX не работает

 < TextField
  name='name'
  id='name'
  label='name'
  variant='outlined'
  InputLabelProps={{
    shrink: true,
  }}
  className={classes.form__item}
  inputRef={register}
/>

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

1. Используете ли вы эту библиотеку react-hook-form.com ? Пожалуйста, укажите это в своем вопросе. Также, пожалуйста, укажите, какой фреймворк пользовательского интерфейса вы используете.

2. Вы пробовали передавать значение по умолчанию непосредственно в текстовое поле? <TextField defaultValue={category.name} /*... */ /> .

3. да. я сделал это следующим образом defaultValue ={category.name }

4. но это не работает .. это работает для обычного текста, но когда я это сделал — значение = {category.name } это работает .. также это работает -<input defaultValue={category.name }/>

Ответ №1:

вероятно, это проблема с рендерингом, когда обработка формы устанавливает значения по умолчанию до того, как redux завершит выборку данных. например, если вы добавили дополнительное useEffect предложение, используя reset from useForm , я подозреваю, что форма будет заполнена значениями по умолчанию.

 const { register, handleSubmit, reset } = useForm({
  defaultValues: {
    name: category.name
  }
})

useEffect(() => {
  reset({ name: category.name })
},[category])