IT技术 - react-hook-form 的 DefaultValues 未设置 React JS 中输入字段的值 - 吾爱随笔录

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

IT技术 reactjs react-hook-form

2021-04-08 04:59:05

我想在输入字段中使用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;

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

2个回答

的问题是，在所述第一渲染，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>
  );
}

@cbr 谢谢你，你是救世主

2021-05-23 04:59:05

重置文档说：“您可以将值作为可选参数传递，以将表单重置为指定的默认值。” .

2021-06-06 04:59:05

是的，这项工作。我注意到当我设置状态时我喜欢分享的一件事，因为null它显示了一个错误，cannot read property of "email" which is null'但是当我设置状态时，[]它会向输入字段显示空值

2021-06-07 04:59:05

是否reset(res.data)会将 defaultValue 重置为 API 用户数据，例如{email: "subro@gg.com", firstname: "subrato"}？我问这个 bcz 我的心态是重置意味着清空输入字段。

2021-06-12 04:59:05

我有id我的用户数据的关键。当我们在 useForm 中定义它们时，id 的 defaultValue 是什么？可以{id: 0, email; "", firstname:""}吗？我正在使用您的第一种方法。

2021-06-17 04:59:05

那绝对有效。使用重置 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])

对于我的问题，这个答案更容易理解，因为它没有其他答案的所有额外噪音。

2021-05-23 04:59:05

其它你可能感兴趣的问题

上一篇如何在 Link: ReactJS 上使用 onClick 事件？下一篇React - 显示 firestore 时间戳