Papa解析给文件类型输入的对象可能为空的类型错误。

Question

我有一个简单的react组件，在这个组件中，我使用HTML输入(type='file')来上传文件，我使用Papa Parse来解析csv文件到JSON。我使用Papa Parse将csv文件解析成JSON。我是用typescript做的。我已经安装了@typesnode和@typespapaparse。如果有人能解决这个问题，我将是非常伟大的。我是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
  }

这是有必要的，因为文件输入有时会因为某种原因而为空。