Question

我想使用react-hook-form在输入字段中提供默认值。首先，我从API端点检索用户数据，然后将状态users设置为该用户数据。然后，我将状态users传递到defaultValues的{{1}}。

useForm()

我通过上面的代码完成了操作，但是没有按预期工作。所有输入字段仍然为空。我想在表单的输入字段中输入一些默认值。

Answer 1

问题在于，在第一次渲染期间，users是useState挂钩的初始值，即null。该值仅在axios.get()请求完成后更改，即初始渲染后。这意味着传递给useForm的默认值为null。

documentation for defaultValues说：

重要：defaultValues缓存在自定义钩子的第一个渲染中。如果您想重置defaultValues，则应使用reset API。

因此，您只需要使用reset即可将表单手动重置为您获取的值。 reset的文档中指出：

注意：您需要将defaultValues传递给useForm才能重置Controller组件的值。

但是，从文档中尚不清楚null是否足以作为defaultValues，或者是否需要为每个输入传递带有字段的适当对象。为了安全起见，我们假设是后者。

执行此操作的代码如下所示：

function LoginFile() {
  const [users, setUsers] = useState({ email: "", firstname: "" });

  const { register, handleSubmit, errors, reset } = useForm({
    defaultValues: users,
  });

  useEffect(() => {
    axios.get("http://localhost:4000/users/1").then((res) => {
      setUsers(res.data);
      reset(res.data);
    });
  }, [reset]);

  useEffect(() => {
    console.log(users);
  }, [users]);

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        Email <input type="email" name="email" ref={register} />
        <br />
        firstname <input name="firstname" ref={register} />
        <br />
        <input type="submit" />
      </form>
    </div>
  );
}

另外，如果useState挂钩的唯一原因是存储defaultValues的值，则根本不需要它，可以将代码清除为：

function LoginFile() {
  const { register, handleSubmit, errors, reset } = useForm({
    defaultValues: { email: "", firstname: "" },
  });

  useEffect(() => {
    axios.get("http://localhost:4000/users/1").then((res) => {
      reset(res.data);
    });
  }, [reset]);

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        Email <input type="email" name="email" ref={register} />
        <br />
        firstname <input name="firstname" ref={register} />
        <br />
        <input type="submit" />
      </form>
    </div>
  );
}

Answer 2

那绝对有效。使用重置 API 和 UseEffect。

从空字符串作为默认值开始，并随着重置的效果更新它们。这是我的代码。在这里也使用 TypeScript 和 Ionic...

const { control: editControl, handleSubmit: editSubmit, reset } = useForm<EditFormType>({
      defaultValues: {
         question: "",
         optionA: "",
         optionB: "",
         optionC: "",
         optionD: "",
      }
   });

   useEffect(() => {
      let defaults ={
         question: editQuestion?.body,
         optionA: editQuestion?.options[0].body,
         optionB: editQuestion?.options[1].body,
         optionC: editQuestion?.options[2].body,
         optionD: editQuestion?.options[3].body,
      }
      reset(defaults)
   }, [editQuestion, reset])

react-hook-form的DefaultValues没有将值设置为React JS中的Input字段

2 个答案: