如何在ReactJS中使用React Hook Form从API更新输入框值

先梳理你代码里的核心问题，再给出针对性修正：

1. API 数据解析与表单赋值问题 #

如果你的接口返回的是数组格式（比如[{field1: 'xxx', field2: 'xxx'}]），直接解构response.data会拿不到有效值；另外，给useForm设置defaultValues能让表单初始状态更明确，避免setValue可能的延迟问题。

2. 缺失更新数据库的提交逻辑 #

原代码的onSubmit仅打印数据，没有调用后端更新接口，这部分必须补充。

3. 错误处理缺失 #

不管是获取数据还是提交数据，都需要处理请求失败的情况，避免页面静默报错。

修正后的完整代码 #

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

function Updatenew() {
  // 初始化表单并设置默认值，确保字段状态稳定
  const { register, handleSubmit, setValue, formState: { errors } } = useForm({
    defaultValues: {
      field1: "",
      field2: ""
    }
  });

  useEffect(() => {
    // 封装获取数据逻辑，添加错误捕获
    const fetchUserData = async () => {
      try {
        const response = await axios.get("http://localhost:8080/data");
        console.log(response.data);
        
        // 兼容接口返回数组或单个对象的情况
        const userData = Array.isArray(response.data) ? response.data[0] : response.data;
        
        // 批量赋值更简洁
        Object.keys(userData).forEach(key => {
          if (["field1", "field2"].includes(key)) {
            setValue(key, userData[key]);
          }
        });
      } catch (error) {
        console.error("获取用户数据失败:", error);
        // 可在此添加前端错误提示，比如弹出Toast
      }
    };

    fetchUserData();
  }, [setValue]);

  // 提交更新逻辑，补充后端请求与错误处理
  const onSubmit = async (data) => {
    try {
      // 根据后端实际接口调整请求方法与地址，这里假设用PUT
      await axios.put("http://localhost:8080/data", data);
      console.log("数据更新成功");
      // 可在此添加成功提示或页面跳转
      // navigate("/user-list");
    } catch (error) {
      console.error("更新数据失败:", error);
      // 添加前端错误提示
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="field1">Name</label>
      <input type="text" id="field1" {...register("field1")} />
      {/* 可选：添加字段验证错误提示 */}
      {errors.field1 && <span>请输入姓名</span>}

      <br />
      <br />

      <label htmlFor="field2">Mobile No</label>
      <input type="text" id="field2" {...register("field2", {
        // 可选：添加手机号格式验证
        pattern: {
          value: /^1[3-9]\d{9}$/,
          message: "手机号格式不正确"
        }
      })} />
      {errors.field2 && <span>{errors.field2.message}</span>}

      <br />
      <br />

      <button type="submit">Submit</button>
    </form>
  );
}

export default Updatenew;

关键改动说明 #

• 给useForm设置defaultValues，确保表单字段初始有值，避免setValue时的状态异常。
• 用async/await重构API请求，代码更易读，同时添加try/catch处理请求错误。
• 兼容接口返回数组或单个对象的情况，避免数据解析失败。
• 补充了更新数据库的后端请求（可根据后端实际要求调整请求方法）。
• 可选添加了表单验证规则与错误提示，提升用户体验。

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