web-dev-qa-db-ja.com

Papa Parseを使用してCSVファイルからReact状態にデータを抽出する方法は？

グラフのCSVファイルを解析するために Papa Parse を使用しています。ファイルを解析した後、データを React state に保存したい。 Papa.Parse（）は何も返さず、結果は非同期でコールバック関数に提供されます。また、setState（）は非同期コールバック内では機能しません。この質問は CSVからの解析済みデータの取得 に似ています。

以下のコードを使用して状態でデータを保存しようとしましたが、期待どおりに機能しませんでした。

componentWillMount() {

    function getData(result) {
      console.log(result); //displays whole data
      this.setState({data: result}); //but gets error here
    }

    function parseData(callBack) {
      var csvFilePath = require("./datasets/Data.csv");
      var Papa = require("papaparse/papaparse.min.js");
      Papa.parse(csvFilePath, {
        header: true,
        download: true,
        skipEmptyLines: true,
        complete: function(results) {
          callBack(results.data);
        }
      });
    }

    parseData(getData);
}

GetData（）内で状態を設定したときに発生するエラーは次のとおりです。 enter image description here

データはgetData（）内で使用できますが、抽出したいと思います。

データをグラフやその他の変数に保存して、グラフに使用するにはどうすればよいですか？

javascriptjsonreactjscsvpapaparse
6
Amanshu Kataria

問題：

関数getDataでthis.setStateを呼び出そうとします。しかし、これはこの関数のコンテキストには存在しません。

ソリューション：

関数ではなく関数を記述しようと思いますが、クラスで関数を記述します。

クラスは次のようになります。

import React, { Component } from 'react';

class DataParser extends Component {

  constructor(props) {
    // Call super class
    super(props);

    // Bind this to function updateData (This eliminates the error)
    this.updateData = this.updateData.bind(this);
  }

  componentWillMount() {

    // Your parse code, but not seperated in a function
    var csvFilePath = require("./datasets/Data.csv");
    var Papa = require("papaparse/papaparse.min.js");
    Papa.parse(csvFilePath, {
      header: true,
      download: true,
      skipEmptyLines: true,
      // Here this is also available. So we can call our custom class method
      complete: this.updateData
    });
  }

  updateData(result) {
    const data = result.data;
    // Here this is available and we can call this.setState (since it's binded in the constructor)
    this.setState({data: data}); // or shorter ES syntax: this.setState({ data });
  }

  render() {
    // Your render function
    return <div>Data</div>
  }
}

export default DataParser;
11
Larce

簡単な方法で react-papaparse を試すことができます。 react-papaparseについての詳細は react-papaparse をご覧ください。ありがとう！

1
Bunlong

getData()をバインドする必要があります：

function getData(result) {
    console.log(result); // displays whole data
    this.setState({data: result}); // but gets error here
}.bind(this)
0
Sandip Kumar Sharma