React文件上传时event.target.files偶尔为空的问题求助

你的代码存在两个核心问题，导致上传成功率仅为50%：

• useState异步更新特性：调用setSelectedFile后，selectedFile不会立刻完成更新，你紧接着用它构建FormData，拿到的是更新前的旧值（初始为[]），因此会发送空表单。
• React合成事件回收机制：部分场景下React会提前回收合成事件对象，导致event.target.files变为null，无法获取选中文件。

修正后的代码 #

function FileUploadButton() {  
  const [selectedFile, setSelectedFile] = useState(null); // 初始值设为null，匹配单个文件场景
  
  const handleFileSelect = (event) => {  
    // 先将文件存入临时变量，避免依赖异步更新的state
    const file = event.target.files?.[0];
    if (!file) return; // 未选中文件时直接返回，避免无效请求
    
    setSelectedFile(file);
    console.log(file); // 打印临时变量而非state
    
    const formData = new FormData();
    formData.append("Audio", file); // 用临时变量构建FormData
    
    fetch(url+'/upload', { 
      method: 'POST', 
      body: formData
    }).then((res1) => {
      if (!res1.ok) {
        return res1.json().then((data) => {console.log(data)});
      }
      // 可在此添加上传成功后的逻辑
    }).catch(err => {
      console.error('上传失败:', err);
    })
  }  
  
  return (  
    <div>  
      <input type="file" name="Audio" onChange={handleFileSelect} />  
    </div>  
  );  
}  

关键改动说明 #

1. 调整state初始值：将[]改为null，更贴合单个文件的业务场景。
2. 使用临时变量存储文件：避免依赖异步更新的selectedFile，确保FormData始终使用最新选中的文件。
3. 增加非空判断：防止未选中文件时发送无效请求。
4. 添加异常捕获：通过catch捕获请求错误，便于排查上传失败问题。

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