使用 redux 和异步请求反应钩子形式

Question

我正在使用 React Hook Form 和 redux。

在一个组件中，我首先必须执行一个操作，向后端发送请求并将结果分配给 Redux。

所以在组件中我一开始就没有form的值。只有当数据已经在 Redux 中分配时。

现在如何使用 Redux 中的值填充字段？

export default function Foo() {
  const { baz } = useSelector(state => state.bar)

  useEffect(() => {
    dispatch(fetchBaz())
  }

  const { handleSubmit, register, errors, reset, watch, setError } = useForm({
         validationSchema,
         defaultValues: baz
  })

  return (
    <input
      key="someKey"
      name={bazBaz}
      ref={register}
      onChange={handleChange}
    />
  )
}

问题是第一次渲染时，baz还没有，defaultValues只设置了{}。

我找到了这个Async request with hook form，但是 baz 还没有在 promise 中设置，因此我不能在那里做 reset(baz)。

如何使用现有值设置表单中的字段？

Answer 1

当您在 useEffect 中获取新数据时重置表单即可。下面的代码没有经过测试，但你应该明白了。

export default function Foo() {
  const { baz } = useSelector(state => state.bar)

  const { handleSubmit, register, errors, reset, watch, setError } = useForm({
      defaultValues: baz
  })

  useEffect(() => {
    dispatch(fetchBaz())
  }, [])

  useEffect(() => {
    if(baz) reset(baz)
  }, [baz])


  return (
    <input
      name={'baz'}
      ref={register({})} 
    />
  )
}

使用 redux 和异步请求反应钩子形式

React hook form with redux and async request

reactjs

redux

react-hook-form