react-hook-form 的默认值未将值设置为 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 are cached on the first render within the custom hook. If you want to reset the defaultValues, you should use the reset api.

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

You will need to pass defaultValues to useForm in order to reset the Controller components' value.

但是，从文档中不清楚 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.

以空字符串作为默认值开始，并将它们更新为重置后的效果。这是我的代码。在这里也将 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 的默认值未将值设置为 React JS 中的输入字段

DefaultValues of react-hook-form is not setting the values to the Input fields in React JS

reactjs

react-hook-form