Javascript 从事件获取文件时，typescript对象可能为null

我正在尝试制作一个typescript+react文件输入组件。 然而，我得到了typescript错误“对象可能为空”。 我在谷歌上搜索过，但找不到解决这个问题的方法。 如何在不禁用typescript null检查的情况下修复此问题

我在e.target.files[0]上遇到错误

下面是代码

import React from 'react';


    export default function ImageUpload() {
      const [selectedFile, setSelectedFile] = React.useState<File | string>('fileurl');
      const [imagePreviewUrl, setImagePreviewUrl] = React.useState<string | undefined | ArrayBuffer | null>();

      const fileChangedHandler = (e : React.ChangeEvent<HTMLInputElement>) => {
        setSelectedFile(e.target.files[0]!);

        const reader = new FileReader();

        reader.onloadend = () => {
          setImagePreviewUrl(reader.result);
        };

        reader.readAsDataURL(e.target.files[0]!);
      };

      const submit = () => {
        const fd = new FormData();

        fd.append('file', selectedFile);
      };

      let imagePreview = (<div className="previewText image-container">Please select an Image for Preview</div>);
      if (imagePreviewUrl) {
        imagePreview = (
          <div className="image-container">
            <img src={imagePreviewUrl} alt="icon" width="200" />
            {' '}
          </div>
        );
      }

      return (
        <div className="App">
          <input type="file" name="avatar" onChange={fileChangedHandler} />
          <button type="button" onClick={submit}> Upload </button>
          { imagePreview }
        </div>
      );
    }

从“React”导入React；
导出默认函数ImageUpload（）{
const[selectedFile，setSelectedFile]=React.useState（'fileurl'）；
const[imagePreviewUrl，setImagePreviewUrl]=React.useState（）；
const fileChangedHandler=（e:React.ChangeEvent）=>{
setSelectedFile（e.target.files[0]！）；
const reader=new FileReader（）；
reader.onloadend=（）=>{
setImagePreviewUrl（reader.result）；
};
reader.readAsDataURL（e.target.files[0]！）；
};
常量提交=（）=>{
const fd=new FormData（）；
fd.append（'file'，selectedFile）；
};
让imagePreview=（请选择要预览的图像）；
如果（imagePreviewUrl）{
图像预览=(
{' '}
);
}
返回(
上传
{imagePreview}
);
}

根据代码，我怀疑

e.target

可以为空。您可以修改

e.target.files[0]到
e.target！。文件[0]，这将使错误消失，因为您基本上会告诉Typescript编译器“它不会为null，相信我”。但是，我建议正确处理空值情况-检查空值或未定义值，并根据您的应用程序逻辑执行适当的操作。
从代码中，我怀疑
e.target
可为空。您可以修改
e.target.files[0]到
e.target！。文件[0]，这将使错误消失，因为您基本上会告诉Typescript编译器“它不会为null，相信我”。但是，我建议正确地处理null情况-检查null或未定义，并根据您的应用程序逻辑执行适当的操作。
HTMLInputElement
具有内置属性
files
，即类型为
FileList | null

if (!e.target.files) return;

只需确保
文件
为
空

if (!e.target.files) return;

在函数的开头。
HTMLInputElement
具有一个内置属性
files
，该属性的类型为
FileList | null

if (!e.target.files) return;

只需确保
文件
为
空

if (!e.target.files) return;

在函数的开头。
伙计们，这是处理此问题的正确方法：

            e.target.files instanceof FileList
              ? reader.readAsDataURL(e.target.files[0]) : 'handle exception'

希望这有帮助。干杯
 伙计们，这是处理这个问题的正确方法：

            e.target.files instanceof FileList
              ? reader.readAsDataURL(e.target.files[0]) : 'handle exception'

希望这有帮助。干杯
 建议一个高概率
null
的空断言是一种不好的味道。同意，这也是我的答案本质上说的。建议一个高概率
null
的空断言是一种不好的味道。同意，这也是我的答案本质上说的。