React上传文件无法设置选中状态，state赋值后显示undefined

我正在使用React开发文件上传功能，希望在上传.docx或.pdf文件时立即将其设置为状态变量。但调用setState后，selectedFile显示为undefined。

相关代码 #

const [selectedFile, setSelectedFile] = useState(null)

<Input type="file" onChange={handleImageUpload} accept={config.type}/>

const handleImageUpload = (event: { target: { files: any[] } }) => {
     const file = event.target.files[0]
     if (file) {
     if (file.size > config?.fileSize) {
       setErrorMessage(config.fileSizeError)
     } else if (file?.name.endsWith(config.type)) {
       setSelectedFile(file)
     } else {
       reader.readAsDataURL(file)
     }
   }
}

调用setSelectedFile(file)后，selectedFile立即显示为undefined，具体原因可能有以下几点：

• React状态更新的异步特性导致误解：React的useState更新是异步批量处理的，调用setSelectedFile(file)后不会立刻同步更新selectedFile的值。如果在调用后立即打印selectedFile，看到的是更新前的旧值（初始的null），而非新设置的File对象。若后续渲染中selectedFile仍为undefined，则需排查其他问题。

• 文件后缀匹配逻辑错误：代码中用file?.name.endsWith(config.type)判断文件类型存在缺陷：

  • 若config.type是多个后缀的字符串（比如.docx,.pdf），endsWith只能匹配完整字符串，无法分别匹配单个后缀，导致符合要求的文件无法进入setSelectedFile分支，selectedFile保持初始值。
  • 若config未定义或config.type为undefined，file.name.endsWith(undefined)会抛出错误，中断代码执行，setSelectedFile根本不会被调用。

• 未声明的reader变量导致报错：else分支中使用了reader.readAsDataURL(file)，但reader变量未初始化（缺少const reader = new FileReader()），这会抛出ReferenceError，中断代码执行，影响状态更新逻辑。

修复建议 #

1. 修正文件类型判断逻辑：改用数组存储允许的后缀，再判断文件后缀是否在数组中：

   // 调整config.type为数组格式：[".docx", ".pdf"]
   const allowedTypes = config.type || [];
   const fileExtension = file.name.slice(file.name.lastIndexOf('.'));
   if (allowedTypes.includes(fileExtension)) {
     setSelectedFile(file);
   }
   

2. 正确处理状态更新的异步性：若需在状态更新后执行逻辑，使用useEffect监听selectedFile变化：

   useEffect(() => {
     if (selectedFile) {
       // 此处可获取最新的selectedFile值
       console.log(selectedFile);
     }
   }, [selectedFile]);
   

3. 初始化reader变量：在else分支中添加FileReader的声明与事件处理：

   else {
     const reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = (e) => {
       // 处理文件读取结果
     };
   }
   

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