react-hook-form编辑时提交字段值为undefined 如何实现可编辑表单功能？

你遇到的提交字段为undefined的问题，是因为react-hook-form默认不会读取表单组件上的defaultValue属性作为初始值，你需要把默认值统一配置在useForm的入参中。

要实现支持已有数据编辑、提交校验、修改自动同步的表单，按以下方式修改即可：

修改后的代码示例 #

import React from "react";
import { useForm } from "react-hook-form";
import { TextField } from "@material-ui/core";

const App = (props) => {
  // defaultValues 传入从数据库查询到的初始数据即可
  const { register, handleSubmit} = useForm({
    defaultValues: {
      firstName: "firstname",
      lastname: "lastname"
    }
  });

  const onSubmit = (data) => {
    console.log(data); // 此时输出为表单当前最新值，用户修改后会自动同步
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h2>Step 1</h2>
      <label>
        First Name:
        <TextField {...register("firstName", {
          // 这里可以加校验规则，提交时会自动触发
          required: "请输入名字"
        })} />
      </label>
      <label>
        Last Name:
        <TextField {...register("lastname", {
          required: "请输入姓氏"
        })} />
      </label>
      <input type="submit" />
    </form>
  );
};

export default App

异步加载数据场景 #

如果初始数据是异步从接口拉取的，可以调用useForm返回的reset方法动态更新表单值：

const { register, handleSubmit, reset } = useForm();

useEffect(() => {
  // 模拟接口请求用户数据
  const fetchUserData = async () => {
    const res = await fetch("/api/user/info");
    const userInfo = await res.json();
    // 拉取到数据后更新表单默认值
    reset({
      firstName: userInfo.firstName,
      lastname: userInfo.lastname
    })
  }
  fetchUserData()
}, [reset])

小提示：如果后续你用到没有标准value、onChange属性的自定义组件，才需要用react-hook-form提供的Controller组件包裹实现数据绑定，当前你用的MUI TextField不需要额外处理。

内容的提问来源于stack exchange，提问作者Gonzalo