React实现上传前文件类型校验功能时出现编译报错如何解决？

核心报错原因 #

你代码的核心问题出在file状态的初始值设置和属性访问前的非空校验缺失：

• 你将file的state初始值设为了空字符串""，当组件首次渲染、或未选择文件就触发校验逻辑时，此时file是字符串类型，不存在type属性，访问file.type直接抛出属性读取错误。
• 调用校验函数前未判断file是否为有效的File对象，空值场景下也会触发同类报错。
• 字符串match方法用字符串作为匹配规则时存在隐式转义问题，建议改用正则字面量更稳妥。

修复代码 #

1. 修正state初始值与文件选择逻辑 #

// js项目写法
const [file, setFile] = useState(null);
// ts项目写法：const [file, setFile] = useState<File | null>(null);

const filePickerHandler = (event) => {
  event.preventDefault();
  // 可选链先判断files是否存在
  const selectedFile = event.target.files?.[0];
  if (selectedFile) {
    setFile(selectedFile);
  }
};

2. 补全校验函数的非空判断与正则匹配 #

const checkFileType = (file)=>{
  // 先校验是否为有效File对象，避免属性读取报错
  if(!file || !(file instanceof File)) return 'Not Supported';
  if(file.type.match(/image.*/)) return "image";
  if(file.type.match(/video.*/)) return 'video';
  if(file.type.match(/audio.*/)) return 'audio';
  return 'Not Supported';
}

可选优化（TypeScript场景） #

如果是TS项目，给输入框的change事件加上类型定义可以提前避免类型报错：

const filePickerHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
  // 原有逻辑
}

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