Next.js中为Server Actions传递额外文件参数及解决useActionState调用报错问题

首先咱们先拆解你遇到的报错原因：useActionState返回的formAction函数，React期望它要么通过表单的action属性自动触发（这时候React会帮你处理好action上下文），要么用startTransition包裹后手动调用——直接调用的话，React会认为你在错误的上下文里触发了action，所以抛出这个警告。

结合你保留文件直到上传成功的核心需求，给你一套完整的解决方案：

1. 解决报错：用startTransition包裹formAction调用 #

只需要修改你的提交处理函数，把formAction的调用放到startTransition里，完全符合报错提示的建议：

import { startTransition } from 'react';

// ... 其他已有代码

const handleFormSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  const formData = new FormData(e.target as HTMLFormElement);
  
  // 可选：如果表单原本有proof文件输入，先删除原有条目避免重复
  formData.delete('proof');
  // 把保存的文件追加到FormData中
  files.forEach((file) => formData.append("proof", file));
  
  // 用startTransition包裹调用，解决上下文报错
  startTransition(() => {
    formAction(formData);
  });
};

2. 上传成功后自动清空文件状态 #

当你的Server Action处理完成功上传后，会返回success: true的状态，我们可以监听这个状态变化，自动清空保存的文件：

import { useEffect } from 'react';

// ... 其他已有代码

const CostTracker = () => {
  // ... 已有的state和钩子
  
  // 监听成功状态，清空文件
  useEffect(() => {
    if (formState.success) {
      setFiles([]);
      setRejectedFiles([]);
    }
  }, [formState.success]);

  // ... 其他代码
};

3. （可选）优化：避免重复提交 #

利用useActionState返回的pending状态，在提交过程中禁用按钮，防止用户重复操作：

// 在你的提交按钮上添加禁用逻辑
<button type="submit" disabled={pending}>
  {pending ? translations('uploading') : translations('submit')}
</button>

方案为什么有效？ #

• startTransition告诉React这个action调用是非紧急的状态更新，既不会阻塞UI，也满足了useActionState对调用上下文的要求，完美解决报错。
• 通过files状态持久化用户选择的文件，每次提交时都把这些文件追加到FormData中，确保后端能收到完整的文件列表，即使之前有验证错误。
• 成功上传后自动清空文件状态，完全匹配你的预期。

额外注意事项 #

• 确保你的Server Action（submit函数）用formData.getAll('proof')来获取所有文件，而不是get，因为你是多次追加同一个key。
• 如果你的文件预览逻辑依赖preview字段，要确保PreviewFile类型的preview属性是正确生成的（比如用URL.createObjectURL(file)）。

备注：内容来源于stack exchange，提问作者Assad Rajab