javascript - 爸爸解析为文件类型输入提供类型错误对象可能为空

Question

我有一个简单的 React 组件，我在其中使用 HTML 输入 (type='file') 上传文件。我正在使用 Papa Parse 将 csv 文件解析为 JSON。我正在用 typescript 来做。我已经安装了@types/node 和@types/papaparse。如果有人能解决这个问题，我会非常棒。我是 TS 新手。

请查看下面的代码和我收到的错误消息的附加快照

  export const UploadFile: React.FC<{}> = () => {
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [highlight, setHighlight] = useState<boolean>(false)

  const openFileDialog = () => {
    if (fileInputRef.current !== null) {
      fileInputRef.current.click()
    }
  }

  const onFilesAdded = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files
    if (files) {
      const array = fileListToArray(files)
    }
  }

  const fileListToArray = (list: FileList) => {
    const fileList = []
    for (let i = 0; i < list.length; i++) {
      fileList.push(list.item(i))
      if (list !== null && list.item !== null) {
        const file = list.item(i)
        parse(file, {
          complete: (results: object) => {
            console.log(results)
          }
        })
      }
    }
    return fileList
  }

Answer 1

你应该像这样用 if(file !== null) 保护调用:

export const UploadFile: React.FC<{}> = () => {
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [highlight, setHighlight] = useState<boolean>(false)

  const openFileDialog = () => {
    if (fileInputRef.current !== null) {
      fileInputRef.current.click()
    }
  }

  const onFilesAdded = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files
    if (files) {
      const array = fileListToArray(files)
    }
  }

  const fileListToArray = (list: FileList) => {
    const fileList = []
    for (let i = 0; i < list.length; i++) {
      fileList.push(list.item(i))
      if (list !== null && list.item !== null) {
        const file = list.item(i)
        if(file !== null) {
          parse(file, {
            complete: (results: object) => {
              console.log(results)
            }
          }
        })
      }
    }
    return fileList
  }

这是必需的，因为文件输入有时由于某种原因为空。