从事件中获取文件时，typecript对象可能为空。

Question

我想做一个typecript+react fileinput的组件，但是我收到typecript错误'Object is possibly null'.我上网查了一下，没有找到解决这个问题的方法，我怎么才能在不禁止typecript 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>
      );
    }

Answer 1

从代码中，我怀疑 e.target 是可空的。您可以修改 e.target.files[0]! 到 e.target!.files[0]!这将使错误消失，因为你基本上会告诉Typescript编译器 "它不会是空的，相信我"。但相反，我建议正确处理null的情况--检查null或undefined，并根据你的应用逻辑做一些适当的事情。

Answer 2

HTMLInputElement 有一个内置属性 files 即 FileList | null

files: FileList | null; 

只需保证以下可能性 files 是 null.

if (!e.target.files) return;

在功能开始的时候。

Answer 3

小伙伴们这才是处理这个问题的正确方法。

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

希望能帮到你们 干杯