[REACTJS] 반응 : CSV 파일 가져 오기 및 구문 분석을

반응 : CSV 파일 가져 오기 및 구문 분석을

해결법

1. ---

   1.내 자신의 질문에 대답하기 위해, 나는 (/src/controllers/data-controller/data-controller.js,보다 선명한에 대한 전체 코드를 추가) 이런 식으로 재 작성 할 수 있었다 :

   내 자신의 질문에 대답하기 위해, 나는 (/src/controllers/data-controller/data-controller.js,보다 선명한에 대한 전체 코드를 추가) 이런 식으로 재 작성 할 수 있었다 :

   import React from 'react';
   import Papa from 'papaparse';
   import {withRouter} from 'react-router-dom';
   
   class DataController extends React.Component {
   
       constructor(props) {
           super(props);
   
           this.state = {
               data: []
           };
   
           this.getData = this.getData.bind(this);
       }
   
       componentWillMount() {
           this.getCsvData();
       }
   
       fetchCsv() {
           return fetch('/data/data.csv').then(function (response) {
               let reader = response.body.getReader();
               let decoder = new TextDecoder('utf-8');
   
               return reader.read().then(function (result) {
                   return decoder.decode(result.value);
               });
           });
       }
   
       getData(result) {
           this.setState({data: result.data});
       }
   
       async getCsvData() {
           let csvData = await this.fetchCsv();
   
           Papa.parse(csvData, {
               complete: this.getData
           });
       }
   
       render() {
           return (
               <section className="data-controller">
                   ...
               </section>
           );
       }
   }
   
   export default withRouter(DataController);
   

   여기에 내가 스트림처럼 그것을 얻을 다음 스트림 리더에 빌드를 사용하여 스트림을 읽고, TextDecoder를 사용하여 데이터를 디코딩하는 가져 오기에 내장 된 사용합니다. 또한 파일을 이동했다. 그것은 / SRC / 컨트롤러 / 데이터 컨트롤러에 위치하지만 난에 / 공공 / 데이터 이동했다되기 전에.

2. ---

   2.여기에 후크 반응하여 유사한 예이다 -

   여기에 후크 반응하여 유사한 예이다 -

   import React from 'react'
   import Papa from 'papaparse'
   
   export default function() {
     const [rows, setRows] = React.useState([])
     React.useEffect(() => {
       async function getData() {
         const response = await fetch('/data/nodes.csv')
         const reader = response.body.getReader()
         const result = await reader.read() // raw array
         const decoder = new TextDecoder('utf-8')
         const csv = decoder.decode(result.value) // the csv text
         const results = Papa.parse(csv, { header: true }) // object with { data, errors, meta }
         const rows = results.data // array of objects
         setRows(rows)
       }
       getData()
     }, []) // [] means just do this once, after initial render
     return (
       <div className="app">
         <Table cols={tripColumns} rows={rows} />
       </div>
     )
   }
   

from https://stackoverflow.com/questions/53416529/react-import-csv-file-and-parse by cc-by-sa and MIT license