JS FileReader onloadend가 리디렉션을 일으키는 것 같습니다.

Question

새로운 FileReader를 통해 CSV를 읽고 구문 분석하는 프론트 엔드 집중 프로젝트에서 작업하고 있습니다. 여기에 내가 개발 도구 덕분에 추측 한 내용에서 잘못된 코드 블록입니다 :

function parseCSVs() { 
    let fileUpload = document.getElementById('file-input') 

    if(fileUpload.files.length) { 
    let fileReader = new FileReader(), 
     varLabels = varAssigner.querySelectorAll('input'); 

    function _addUntilFull(i) { 
     fileReader.readAsText(fileUpload.files[i]) 
     fileReader.onloadend = function() { 
     addVar(varLabels[i].value, csvToMatrix(fileReader.result)) 

     if(varList.length == fileUpload.files.length) { 
      return; 
     } else { 
      _addUntilFull(i + 1) 
     } 
     } 
    } 
    _addUntilFull(0) 
    } 

Preserved console messages

로그를 보존 한 후 (위 그림 참조), I는 콘솔 (모든 올바른 메시지를 기록 것을 발견 필자가 내 기능을 모두 제대로 작동한다고 생각하게 만들었지 만 문서는 파일 제출 및 구문 분석 완료시 다시 지우고 다시로드되며 로그에는 "file : /// etc /로 이동"이라고 표시되므로이 문제가 발생할 가능성이 큽니다 FileReader 또는 input [type = "file"] 객체의 일부에서 예기치 않은 동작이 발생했습니다. MDN의 FileReader 또는 다른 온라인 포럼에 대한 이유를 설명하는 문서에서 아무것도 찾을 수 없습니다. 도와주세요! 이것은 그런 두통이었습니다 -_- 고마워요!

Answer 1

실제로 문제가 무엇인지 알아 냈고 위 코드 블록과 아무런 관련이 없습니다 ... parseCSVs 함수를 트리거 한 버튼은 양식 안에 있었고 '액션'을 삭제했지만 폼의 "method"속성에 "type"이 없으면 버튼은 onclick 함수가 실행 된 후 리디렉션을 트리거합니다. 나는 또한 베어 본 HTML 파일에 속성이없는 폼과 버튼에 대한 테스트를 실행했고 위와 같은 동작을 발견했다. 요소를 전환하여 리디렉션을 방지하고 문제를 해결했습니다.