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

Question

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

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.

defaultValues的文档说明如下：

defaultValues缓存在自定义钩子内的第一个渲染上。如果要重置defaultValues，则应使用resetapi。

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

您将需要传递defaultValues到useForm以reset该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])