使用Redux状态初始化React钩子表单的默认值

时间:2020-08-14 10:27:24

标签: reactjs redux react-redux material-ui redux-toolkit

我很难使用React Redux对象为React钩子表单分配默认值。

我正在使用react-hook-form,Redux工具箱和materiauli。看来问题出在materialui的TextField上,但我仍然无法解决。

初始化

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 个答案:

答案 0 :(得分:0)

在调度后尝试使用 setValue()

useEffect(() => {
  dispatch(getCategoryData(id)).then(catagory => {
   setValue('name', catagory.name)
 })
}, [])