如何将react-dropzone与useFormState集成？表单提交文件为null问题排查

核心原因 #

1. 拖拽文件未同步到原生input：react-dropzone在处理拖拽文件时，只会通过onDrop回调返回文件列表，但原生file input的files属性是只读的，无法通过JS直接修改，因此拖拽的文件不会被自动纳入表单提交的FormData中。
2. Select按钮未触发文件选择：DragDrop组件中的Select按钮没有绑定点击事件来触发隐藏的file input，导致用户点击按钮无法打开文件选择器，只能依赖拖拽操作。
3. Form中action函数命名不匹配：Form组件里useFormState传入的是sendForm，但实际处理函数是postFiles，这会导致提交逻辑无法正确触发（假设是笔误）。

修复步骤 #

1. 共享文件状态，同步拖拽/选择的文件

在Form组件中维护文件状态，并传递给DragDrop组件更新：

// Form组件
export default function Form() {
  const [files, setFiles] = useState<File[]>([]);
  const initialState = { message: "" };
  // 修正action函数为postFiles
  const [state, dispatch] = useFormState(postFiles, initialState);

  return (
    <form action={(formData) => {
      // 手动将共享状态中的文件追加到FormData
      files.forEach(file => formData.append("files", file));
      return dispatch(formData);
    }}>
      <DragDrop setFiles={setFiles} />
      <FormActions />
      <Button type="submit">Send</Button>
    </form>
  );
}

2. 完善DragDrop组件功能

• 接收Form传递的setFiles，在onDrop时更新文件状态
• 给Select按钮添加点击事件，触发原生input的文件选择框
• 添加multiple属性（可选，支持多文件上传）

// DragDrop组件
export default function DragDrop({ setFiles }: { setFiles: React.Dispatch<React.SetStateAction<File[]>> }) {
  const onDrop = useCallback((droppedFiles: File[]) => {
    console.log(droppedFiles);
    setFiles(droppedFiles);
  }, [setFiles]);

  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept: {
      "application/pdf": [".pdf"],
    },
  });

  return (
    <div {...getRootProps()}>
      <p>Drop or select a file here</p>
      {/* 点击按钮触发隐藏的file input */}
      <Button onClick={() => document.querySelector('input[type="file"]')?.click()}>Select</Button>
      {/* 添加multiple支持多文件，name属性保留 */}
      <input {...getInputProps()} name="files" multiple />
    </div>
  );
}

3. 调整FormAction获取文件的方式

如果支持多文件，使用formData.getAll("files")获取所有文件；单个文件则用formData.get("files")：

// Form action函数
export async function postFiles(prevState: State, formData: FormData) {
  // 获取所有上传的文件
  const files = formData.getAll("files");
  console.log("files", files);

  // 实现文件上传逻辑
  return {
    message: "Uploaded",
  };
}

验证效果 #

现在无论是拖拽文件还是点击Select按钮选择文件，都会同步到Form的文件状态中，表单提交时会手动将这些文件追加到FormData，postFiles就能正确获取到文件了。

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