React中useState设置File数组类型默认值后始终为undefined的问题咨询

你现在踩的坑，完全是三类认知混淆导致的，没有什么复杂的运行时bug：

• 把类型标注逻辑当成了可运行的JS代码。你写的useState([ File ]) 根本不是“声明这个状态存储File类型数组”的占位——在纯JS环境下，中括号内的表达式会被真实执行，这行代码的实际效果是创建一个数组，把你定义的File组件（本质是个返回JSX的渲染函数）当成数组第一个元素存进去，和“存储文件数据”的需求完全不沾边。
• 概念边界完全搞混了，你至少把三个东西当成了同一个：
  • 你自己写的File React组件：是负责渲染文件列表行的UI逻辑，是个渲染函数
  • 浏览器原生的File对象：是用户上传文件时生成的、带文件元信息的原生JS实例，才是你业务逻辑真正要存的文件数据
  • TypeScript的泛型类型写法：只有在TS项目里，才会用useState<File[]>([]) 的语法做类型约束，纯JS项目根本不存在“在数组里塞占位值表示类型”的写法
• 你后续尝试修改的useState([ {File} ]) 写法，本质只是把File组件作为对象属性塞进了数组，依然没有生成符合需求的初始值结构。

这个现象根本不是初始值写法的问题：如果初始值真的是[File] 或者[{File}]，data的值至少会是包含组件引用的数组，不可能是undefined。问题出在你后续更新状态的逻辑里：你在调用setData 时，把可能为undefined的值直接作为参数传了进去（比如接口请求失败返回空、文件读取流程中断没拿到有效值、从DOM取文件列表时匹配到了不存在的节点）。

• 纯JS项目下，存储文件数组的初始值直接写空数组即可，不需要任何类型占位，顺便建议把状态名改得更语义化，避免和原生File概念混淆：

const [fileList, setFileList] = useState([])

// 后续拿到用户上传的File对象后，直接更新状态即可
const handleSelectFile = (e) => {
  const selectedFiles = Array.from(e.target.files)
  setFileList(prev => [...prev, ...selectedFiles])
}

• 如果是TS项目需要做类型约束，正确的写法是把类型作为泛型传给useState，绝对不要在初始值里塞组件当占位：

const [fileList, setFileList] = useState<File[]>([])

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