React 19 useActionState()如何重置formData中的特定字段？

问题描述 #

我在表单中使用了React 19的实验性API useActionState()，它返回包含错误/成功消息的结构化状态数据。当状态中有消息时，我想通过点击按钮关闭它，但直接修改formState.message = ''这类操作完全无效。请问怎么才能重置formState里的特定字段，而不是整个对象？

结构化状态示例：

{
  "success": false,
  "message": "No record found to update",
  "formData": {
    // 表单数据字段
  }
}

我的代码片段：
Form.tsx

const [formState, formAction, isPending] = useActionState(
  updateSettings,
  initialFormState,
);

<form action={formAction}>
  {formState?.message && (
    <div>
      {formState.message}

      {/* 这个按钮的点击逻辑无效 */}
      <button type="button" onClick={() => formState.message = ''}> 
        关闭
      </button>

    </div>
  )}
</form>

updateSettings.tsx

export async function updateSettings(
  prevState: UpdateSettingsResponse | null,
  formData: FormData,
): Promise<UpdateSettingsResponse> {
  // 业务逻辑处理
  return {
    success: response?.success || false,
    message: response?.message,
    formData: rawFormData,
  };
}

解决方案 #

方法1：通过触发formAction传递特殊标识更新状态 #

useActionState的状态只能由关联的action函数更新，直接修改formState不会触发组件重渲染——因为React状态是不可变且受控的。我们可以给action函数加个特殊标识，让它返回清除指定字段后的状态。

1. 修改Form.tsx，给关闭按钮添加隐藏字段传递指令：

const [formState, formAction, isPending] = useActionState(
  updateSettings,
  initialFormState,
);

<form action={formAction}>
  {/* 隐藏字段用于传递操作类型 */}
  <input type="hidden" name="action" value="" />
  
  {formState?.message && (
    <div>
      {formState.message}
      <button 
        type="submit" 
        onClick={(e) => {
          // 设置隐藏字段值，告诉action要清除消息
          e.currentTarget.form?.elements.namedItem('action')?.setAttribute('value', 'clear-message');
        }}
      >
        关闭
      </button>
    </div>
  )}
  
  {/* 其他表单字段 */}
</form>

2. 修改updateSettings.tsx，处理清除消息逻辑：

export async function updateSettings(
  prevState: UpdateSettingsResponse | null,
  formData: FormData,
): Promise<UpdateSettingsResponse> {
  const action = formData.get('action');
  
  // 处理清除消息的指令，返回清除后的状态
  if (action === 'clear-message') {
    return {
      ...prevState!,
      message: '',
      success: null, // 可选：同时清除success状态
    };
  }

  // 原有的业务逻辑
  // ...
  
  return {
    success: response?.success || false,
    message: response?.message,
    formData: rawFormData,
  };
}

方法2：用本地useState控制消息显示 #

如果不需要把消息状态同步到useActionState的全局状态里，可以用本地状态单独控制显示逻辑，更简单直接：

const [formState, formAction, isPending] = useActionState(
  updateSettings,
  initialFormState,
);
// 本地状态控制消息是否展示
const [showMessage, setShowMessage] = useState(true);

// 当formState的message变化时，自动显示消息
useEffect(() => {
  if (formState?.message) {
    setShowMessage(true);
  }
}, [formState?.message]);

<form action={formAction}>
  {formState?.message && showMessage && (
    <div>
      {formState.message}
      <button type="button" onClick={() => setShowMessage(false)}> 
        关闭
      </button>
    </div>
  )}
</form>

方法3：直接调用formAction更新状态（React 19实验特性） #

React 19的useActionState支持直接调用formAction来更新状态，不用走表单提交流程。可以直接传自定义FormData触发状态更新：

const [formState, formAction, isPending] = useActionState(
  updateSettings,
  initialFormState,
);

const handleCloseMessage = () => {
  const clearFormData = new FormData();
  clearFormData.set('action', 'clear-message');
  // 直接调用formAction更新状态
  formAction(clearFormData);
};

<form action={formAction}>
  {formState?.message && (
    <div>
      {formState.message}
      <button type="button" onClick={handleCloseMessage}> 
        关闭
      </button>
    </div>
  )}
</form>

对应的updateSettings.tsx逻辑和方法1一致，处理clear-message指令即可。

关键原因 #

useActionState返回的formState是React受控状态，和普通useState一样，不能直接修改状态对象的属性，必须通过action函数返回新的状态对象才能触发重渲染。直接修改formState.message不会触发组件更新，所以看起来无效。

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