React form action 返回错误时怎样保留输入-Golang学习网

用 React 原生 form action 实现服务端提交流程时，很容易碰到 action 返回错误后用户已填写的内容全部清空的问题，我们可以通过几种轻量的方案实现输入内容保留，不需要用户全部重填。

不用额外引入第三方表单库，借助 useActionState 返回的状态字段、提交前暂存 formData 或者受控组件本地缓存，就能把报错前的用户输入直接回填到表单控件里。

React 的 form action 在提交函数正常返回后会重置非受控字段，所以“action 返回了校验错误”并不等于“输入会自动保留”。要保留用户刚刚填过的内容，关键是让 action 返回统一状态：失败时同时返回错误信息和提交时的 FormData，组件再把它们分别用于提示和 defaultValue。

官方地址：https://react.dev/

失败时保留 submitted，成功时把它设为 null。React 随后的表单 reset 会重新采用新的默认值，输入就不会在错误提示出现时消失。

先分清 action 返回错误和抛出异常

这两个分支的处理方式不同。action 返回一个普通对象，哪怕对象里有 error，对 React 来说仍然是一次正常完成；函数形式的 action 完成后会触发表单的非受控字段 reset。相反，action 直接抛出异常时，React 会把错误交给最近的 Error Boundary，这适合不可恢复的系统故障，不适合把用户可以修正的字段校验写成异常。

因此，字段校验、重复名称、业务条件不满足等可恢复问题应返回状态；网络故障或真正无法继续的异常再抛出，让错误边界负责兜底。

让 action 返回 error 和 submitted

下面的 action 约定固定返回两个字段。失败时保存本次提交的 FormData，成功时把 submitted 清成 null，这样同一份状态就能决定“保留还是清空”。

import { useActionState } from 'react';

const initialState = { error: null, submitted: null };

async function saveProfile(previousState, formData) {
  const nickname = String(formData.get('nickname') ?? '').trim();

  // 可恢复的输入错误返回状态，不抛异常，便于用户继续修改。
  if (nickname.length 
      
        昵称
        
      
      {state.error && {state.error}}
    
  );
}

注意 action 被 useActionState 包装后，参数顺序变成 previousState, formData；如果仍按普通 form action 的单参数写法读取，拿到的就不是表单数据。每个要回填的控件还必须有稳定的 name，否则 FormData.get() 无法取到它。

React form action 失败状态由 error 和 submitted FormData 两条关系组成的原创说明图

图 1：说明图，左侧是表单提交，右侧把可恢复错误与 submitted FormData 一起交给下一次渲染。

用 defaultValue 让 reset 回到失败输入

这里最容易误解的是 defaultValue 并不是每次渲染都强行覆盖用户输入。它提供的是字段的默认值。action 完成后 React 执行 reset，浏览器再使用组件刚刚渲染出的默认值，因此失败状态里的 submitted?.get('nickname') 会被保留下来。

成功分支把 submitted 设为 null，表达“这次已经保存，不需要再恢复旧输入”。如果要保留多个字段，可以在同一个状态里逐一读取：

const displayName = state.submitted?.get('displayName') ?? '';
const email = state.submitted?.get('email') ?? '';

// 只把失败提交值作为默认值；不要在这里把 FormData 直接渲染到页面。
return 
  >;

React 自动 reset 前后通过 defaultValue 恢复输入的原创结构说明图

图 2：结构说明图，失败路径把 submitted 写成新的默认值，成功路径把它清空。

提交中状态、异常和常见误区

isPending 应用于禁用提交按钮或显示保存中提示，避免用户在同一次请求尚未结束时重复点击。不要把所有失败都用 throw new Error() 表达：可预期的字段错误应该返回状态，否则用户可能只看到 Error Boundary，刚填好的字段也没有可控的恢复路径。

如果你选择完全受控的输入，也可以用 useState 管理 value 和 onChange，但这会增加同步代码；本文方案更适合简单表单和 React 原生 action。若 action 是 Server Function，还要保证返回状态可序列化，并让服务端重新返回需要保留的字段。

常见问题

为什么我返回了 error，输入还是被清空？

因为返回错误对象本身不会阻止 React reset。需要把提交的 FormData 放进 state，并把每个输入的 defaultValue 绑定到该 state。

什么时候应该抛异常？

字段校验失败、业务条件不满足等可恢复问题返回状态；无法恢复的请求故障或程序错误再抛出，并由 Error Boundary 展示兜底界面。

总结

React form action 保留输入的核心不是阻止 reset，而是让 reset 之后仍有正确的默认值：用 useActionState 返回 error 与 submitted，失败时回填 defaultValue，成功时把 submitted 清空。这样校验反馈、输入保留和成功清理就各自有了明确边界。