web-dev-qa-db-ja.com

反応：csvファイルをインポートして解析

data.csvという名前の次のcsvファイルがあり、jsコントローラーと同じフォルダーにあります。

namn,vecka,måndag,tisdag,onsdag,torsdag,fredag,lördag,söndag
Row01,a,a1,a2,a3,a4,a5,a6,a7
Row02,b,b1,b2,b3,b4,b5,b6,b7
Row03,c,c1,c2,c3,c4,c5,c6,c7
Row04,d,d1,d2,d3,d4,d5,d6,d7
Row05,e,e1,e2,e3,e4,e5,e6,e7
Row06,f,f1,f2,f3,f4,f5,f6,f7
Row07,g,g1,g2,g3,g4,g5,g6,g7
Row08,h,h1,h2,h3,h4,h5,h6,h7
Row09,i,i1,i2,i3,i4,i5,i6,i7
Row10,j,j1,j2,j3,j4,j5,j6,j7
Row11,k,k1,k2,k3,k4,k5,k6,k7
Row12,l,l1,l2,l3,l4,l5,l6,l7

反応として、csvファイルをインポートしてJSONに解析する必要があります。私は以下を試しました：

componentWillMount() {
    this.getCsvData();
}

getData(result) {
    console.log(result);
}

getCsvData() {
    let csvData = require('./data.csv');

    Papa.parse(csvData, {
        complete: this.getData
    });
}

これは何らかの理由で機能しません。最初のconsole.logには/static/media/data.0232d748.csvが表示され、2番目には次のように表示されます。

{
  "data": [
    [
      "/static/media/horoscope-data.0232d748.csv"
    ]
  ],
  "errors": [
    {
      "type": "Delimiter",
      "code": "UndetectableDelimiter",
      "message": "Unable to auto-detect delimiting character; defaulted to ','"
    }
  ],
  "meta": {
    "delimiter": ",",
    "linebreak": "\n",
    "aborted": false,
    "truncated": false,
    "cursor": 41
  }
}

私が何を間違っているのか理解できません。誰かが私を助けてくれますか？

javascriptreactjscsvparsingimport
8
BluePrint

私自身の質問に答えるために、私はそれを次のように書き直すことができました（/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/controllers/data-controllerに配置されていましたが、/public/dataに移動する必要がありました。

13
BluePrint

React Hooks-

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>
  )
}
4
Brian Burns