javascript - typescript วัตถุอาจเป็นค่าว่างเมื่อกำลังดึงไฟล์จากเหตุการณ์

ฉันกำลังพยายามสร้างคอมโพเนนต์ fileinput ด้วย typescript + react อย่างไรก็ตามฉันได้รับข้อผิดพลาดของ typescript ว่า 'Object is possibly null' ฉันได้ค้นหาในกูเกิลแล้วแต่ไม่พบวิธีแก้ปัญหานี้ ฉันจะแก้ปัญหานี้ได้อย่างไรโดยไม่ต้องปิดการตรวจสอบค่า null ของ typescript

ฉันกำลังได้รับข้อผิดพลาดบน 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>
      );
    }

คำตอบ #1

HTMLInputElement มีพร็อพเพอร์ตี้ในตัว files ที่มีชนิดเป็น FileList | null

files: FileList | null; 

เพียงแค่ตรวจสอบความเป็นไปได้ที่ files จะเป็น null

if (!e.target.files) return;

ตอนต้นของฟังก์ชัน

คำตอบ #2

เพื่อนๆ นี่คือวิธีที่ถูกต้องในการจัดการกับปัญหานี้:

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

หวังว่านี่จะช่วยได้นะ สวัสดี!