3

我将React Hook Form与 redux 一起使用。

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

所以在组件中我一开始没有表单的值。仅当数据已在 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只设置了{}。

我发现这个带有钩子形式的异步请求，但是 baz 还没有在承诺中设置，因此我不能在reset(baz)那里做。

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

4

1 回答 1

2

当您在 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({})} 
    />
  )
}
于 2020-12-14T12:42:44.007 回答