React Hook Form调用API后如何更新默认值？

问题核心是：保存评论后，表单的全局defaultValues没有同步更新，导致放弃编辑时回退到初始值而非最新保存的内容。你之前用resetField的方式只修改了单个字段的临时状态，没触发表单全局defaultValues的更新，所以无效。

下面是两种靠谱的解决方法：

方法一：用reset全局更新表单defaultValues #

保存成功后，调用reset方法时传入最新数据，并指定defaultValues配置，这样后续放弃编辑时就会回退到最新保存的值。

import { useForm, useState } from "react-hook-form";

function CommentCard() {
  const [isEditing, setIsEditing] = useState(false);
  const { register, reset, formState: { values } } = useForm({
    defaultValues: { comment: "Comment test 1" }
  });

  // 模拟API保存逻辑
  const saveCommentAPI = async (comment) => {
    // 替换为真实API请求
    return new Promise(resolve => setTimeout(resolve, 500));
  };

  const handleSave = async () => {
    const updatedComment = values.comment;
    await saveCommentAPI(updatedComment);
    
    // 关键：更新表单全局defaultValues为最新保存的值
    reset(
      { comment: updatedComment },
      { defaultValue: { comment: updatedComment } }
    );
    
    setIsEditing(false);
  };

  const handleCancel = () => {
    // 调用reset不带参数，自动回退到当前全局defaultValues
    reset();
    setIsEditing(false);
  };

  return (
    <div className="comment-container">
      {/* 评论卡片展示 */}
      {!isEditing && (
        <div className="comment-card">
          <p>{values.comment}</p>
          <button onClick={() => setIsEditing(true)}>编辑评论</button>
        </div>
      )}

      {/* 编辑表单 */}
      {isEditing && (
        <div className="comment-editor">
          <textarea {...register("comment")} rows={3} />
          <div className="editor-buttons">
            <button onClick={handleSave}>保存</button>
            <button onClick={handleCancel}>放弃</button>
          </div>
        </div>
      )}
    </div>
  );
}

方法二：配合状态管理同步保存值 #

把最新保存的评论存在独立状态里，初始化表单时用这个状态作为defaultValues，保存成功后更新状态并同步表单。

import { useState } from "react";
import { useForm } from "react-hook-form";

function CommentCard() {
  const [isEditing, setIsEditing] = useState(false);
  const [savedComment, setSavedComment] = useState("Comment test 1");
  const { register, reset, formState: { values } } = useForm({
    defaultValues: { comment: savedComment }
  });

  const saveCommentAPI = async (comment) => {
    return new Promise(resolve => setTimeout(resolve, 500));
  };

  const handleSave = async () => {
    const updatedComment = values.comment;
    await saveCommentAPI(updatedComment);
    
    setSavedComment(updatedComment);
    // 同步更新表单defaultValues
    reset({ comment: updatedComment }, { defaultValue: { comment: updatedComment } });
    
    setIsEditing(false);
  };

  const handleCancel = () => {
    // 直接回退到状态里记录的最新保存值
    reset({ comment: savedComment });
    setIsEditing(false);
  };

  // UI部分与方法一一致，省略
}

补充说明 #

resetField仅针对单个字段临时重置，不会修改表单全局的defaultValues配置。只有通过reset方法传入defaultValues参数，才会更新全局默认值，确保后续放弃编辑时能回到最新保存的状态。

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