react-hook-form 的 DefaultValues 未将值设置为 React JS 中的输入字段

Question

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

import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";

function LoginFile() {
  const [users, setUsers] = useState(null);

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

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

  const { register, handleSubmit, errors } = useForm({
    defaultValues: 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>
 );
}
export default LoginFile;

我按照上面的代码做了，但没有按预期工作。所有输入字段仍为空。我想在表单的输入字段中有一些默认值。

Answer 1

问题是在第一次渲染时，users 是useState 钩子的初始值，即null。该值仅在axios.get() 请求完成后发生变化，即在初始渲染之后。这意味着传递给useForm 的默认值是null。

documentation for defaultValues 表示如下：

defaultValues 在自定义挂钩内在第一次渲染时缓存。如果你想重置defaultValues，你应该使用reset api。

因此，您只需使用reset 将表单手动重置为您获取的值。 reset 的文档说明如下：

您需要将defaultValues 传递给useForm 才能将reset 传递给Controller 组件的值。

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

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

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。

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

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])