如何使用Papa Parse从CSV文件中提取数据到React状态？ [英] How to extract data to React state from CSV file using Papa Parse?

问题描述

我正在使用

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

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

解决方案

问题：

您尝试在函数getData中调用this.setState。但这在此函数的上下文中不存在。

解决方案：

我会尽力不在函数中编写函数，但在类中编写函数。

你的类看起来像这样：

 从'react'导入React，{Component}; 
 
 class DataParser extends Component {
 
 constructor（props）{
 // Call super class 
 super（props）; 
 
 //将此绑定到函数updateData（这消除了错误）
 this.updateData = this.updateData.bind（this）; 
} 
 
 componentWillMount（）{
 
 //您的解析代码，但未在函数中分离
 var csvFilePath = require（./ datasets /Data.csv）; 
 var Papa = require（papaparse / papaparse.min.js）; 
 Papa.parse（csvFilePath，{
 header：true，
 download：true，
 skipEmptyLines：true，
 //这里也有。所以我们可以调用我们的自定义类方法
 complete：this.updateData 
}）; 
} 
 
 updateData（result）{
 const data = result.data; 
 //这里有可用的，我们可以调用this.setState（因为它在构造函数中被绑定）
 this.setState（{data：data}）; //或更短的ES语法：this.setState（{data}）; 
} 
 
 render（）{
 //你的渲染函数
返回< div>数据< / div> 
} 
} 
 
导出默认DataParser; 
  

I'm using Papa Parse to parse a CSV file for Graphs. I want to store the data in React state after the file is parsed. Papa.Parse() doesn't return anything and results are provided asynchronously to a callback function. Also, setState() doesn't work inside a async callback. This question is similar to Retrieving parsed data from CSV.

I tried storing the data in state using below code, but as expected it didn't work.

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);
}

Here's the error I get when I set state inside getData().

The data is usable inside getData(), but I want to extract it.

How should I store the data in state or in some other variable so that I can use it for Graphs?

解决方案

The problem:

You try to call this.setState in the function getData. But this does not exist in the context of this function.

The solution:

I would try to not write function in functions, but write the functions in the class.

You class could look like this:

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;

这篇关于如何使用Papa Parse从CSV文件中提取数据到React状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！