React 기능 구성 요소를 사용하여 CSV 파일을 읽는 방법

다음은 React 후크 및 기능 구성 요소를 사용하여 .csv 파일에서 읽는 코드입니다. CsvReader는 useState 후크를 사용하여 파일 이름과 파일에서 읽은 데이터를 상태 변수에 저장하는 기능 구성 요소입니다. 이것은 GitHub 링크입니다: https://github.com/donnabrown77/csv-reader .

HTML 테이블에 CSV 데이터를 표시하기 위해 자식 구성 요소를 포함했습니다. 다음은 이 코드에 대한 링크입니다.
.

먼저 기능 구성 요소와 상태 변수를 만듭니다.

const CsvReader = () => {
  // save the input file name to a state variable
  const [csvFile, setCsvFile] = useState(null);
  // save the file data to a state variable
  // so the DisplayTable component can use it
  const [csvArray, setCsvArray] = useState([]);
}

csv 데이터의 각 줄은 개행 문자로 구분됩니다. 그래서 제거해야 합니다. 맵 기능을 사용하여 쉼표를 공백으로 바꿉니다. 그런 다음 행 데이터로 setCsvArray를 호출합니다.

다음으로 파일 업로드를 처리하는 함수를 작성합니다.

const handleFileUpload = () => {
    const file = csvFile;
    const reader = new FileReader();

    reader.onload = function (e) {
      const text = e.target.result;
      processCSV(text);
    };

    reader.readAsText(file);
  };

기능 구성 요소를 설정합니다. 입력 유형="파일"및 수락=".csv"와 함께 jsx를 반환하고 onClick 이벤트 핸들러가 있는 버튼을 반환합니다. DisplayTable은 테이블 머리글, 행 및 셀 데이터를 하드 코딩하지 않고 html 테이블을 표시하기 위해 작성한 자식 구성 요소입니다. 선택 사항입니다.

return (
    <div>
      <input
        type="file"
        accept=".csv"
        onChange={(e) => {
          setCsvFile(e.target.files[0]);
        }}
      />
      <button
        onClick={(e) => {
          e.preventDefault();
          handleFileUpload();
        }}
      >
        Submit
      </button>
      <br />
      <DisplayTable value={csvArray} />
    </div>
  );
};

export default CsvReader;

이것이 최종 결과입니다.

import React from "react";
import { useState } from "react";
import DisplayTable from "./DisplayTable";

const CsvReader = () => {
  // save the input file name to a state variable
  const [csvFile, setCsvFile] = useState(null);
  // save the file data to a state variable
  // so the DisplayTable component can use it
  const [csvArray, setCsvArray] = useState([]);

  const processCSV = (str) => {
    // split the file data into rows from the newline character
    let rows = str.split("\n");

    // remove comma
    rows = rows.map(function (row) {
      return row.replace(/,/g, " ");
    });
    setCsvArray(rows);
  };

  const handleFileUpload = () => {
    const file = csvFile;
    const reader = new FileReader();

    reader.onload = function (e) {
      const text = e.target.result;
      processCSV(text);
    };

    reader.readAsText(file);
  };

  return (
    <div>
      <input
        type="file"
        accept=".csv"
        onChange={(e) => {
          setCsvFile(e.target.files[0]);
        }}
      />
      <button
        onClick={(e) => {
          e.preventDefault();
          handleFileUpload();
        }}
      >
        Submit
      </button>
      <br />
      <DisplayTable value={csvArray} />
    </div>
  );
};

export default CsvReader;