React-dropzone多文件上传附加元数据并整合为统一数组问题

解决思路 #

核心方案是把分散在子组件的状态统一提升到父组件维护，所有文件的元数据和文件本身直接绑定成你需要的目标结构存在数组里，不需要最后再做分散数据的聚合。

具体实现步骤 #

1. 父组件统一维护文件列表状态
   父组件的状态直接存储符合你要求的目标结构数组，初始值为空数组。每次新增文件上传时，直接往数组中推入初始化的条目：

// 新文件上传回调
const handleFileUpload = (newFiles) => {
  const initFileItems = newFiles.map(file => ({
    File: file,
    type_of_file: { docTypeSelect: 'other' }, // 预设默认文件类型
    date_of_file: null
  }))
  setFileList(prevList => [...prevList, ...initFileItems])
}

2. 子组件通过父组件传入的方法同步状态
   你之前子组件各自维护状态才导致数据分散，现在给每个渲染的文件子组件传入两个参数：当前文件在数组中的索引、父组件的元数据更新方法。
   子组件内修改文件类型、选择日期时，都调用更新方法把数据同步到父组件的对应条目：

// 父组件定义的元数据更新方法
const updateFileMeta = (index, field, value) => {
  setFileList(prev => {
    const updatedList = [...prev]
    updatedList[index][field] = value
    // 附加逻辑：如果文件类型切换为非发票，自动清空对应日期
    if (field === 'type_of_file' && value.docTypeSelect !== 'invoice') {
      updatedList[index].date_of_file = null
    }
    return updatedList
  })
}

子组件内切换文件类型时调用：updateFileMeta(当前索引, 'type_of_file', {docTypeSelect: 你选中的类型值})
选择日期时调用：updateFileMeta(当前索引, 'date_of_file', {invoiceDateInput: 你选中的日期数组})

3. 删除功能直接操作父组件数组
   删除单个文件时，只需要把对应索引传给父组件，过滤掉对应下标的条目即可：

const handleDeleteItem = (index) => {
  setFileList(prev => prev.filter((_, i) => i !== index))
}

4. 提交请求直接使用状态
   发送请求到后端前，你不需要做任何额外的聚合操作，fileList这个状态本身就是你需要的目标结构数组，直接按后端要求转为FormData或者序列化后提交即可。

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