如何使用Papa Parse从CSV文件中提取数据到React状态？

Question

我正在使用Papa Parse来解析图表的CSV文件。我希望在解析文件后将数据存储在React state中。 Papa.Parse（）不返回任何内容，并且结果以异步方式提供给回调函数。此外，setState（）在异步回调中不起作用。此问题与Retrieving parsed data from 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（）中设置状态时得到的错误。

数据在getData（）中可用，但我想提取它。

我应该如何将数据存储在状态或其他变量中，以便我可以将其用于图形？

Answer 1

问题：

您尝试在函数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;

Answer 2

您可以尝试一种简单的方法react-papaparse。有关react-papaparse的更多详细信息，请访问react-papaparse。谢谢！

Answer 3

您需要绑定getData()：

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