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

Posted 2023-02-22

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

【英文标题】：How to extract data to React state from CSV file using Papa Parse?

【发布时间】：2018-04-01 15:49:21

【问题描述】：

我正在使用 Papa Parse 解析 CSV 文件以获取 Graphs。我想在解析文件后将数据存储在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() 中使用，但我想提取它。

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

【问题讨论】：

您能否将您的主题行改写为一个易于阅读和理解的问题？您的帖子直到最后一行才包含问题，这并不理想。

@Jacob 请检查最后一行。

您收到的错误信息究竟是什么？ （在 this.setState(data: result);)

@Amanshu：我的意思是：你的帖子的主题必须是一个问题。 Stack Overflow 以问答为基础。如果您的帖子没有以问题为标题，那么怎么会有答案呢？ （请参阅顶部的菜单栏：它首先显示问题！）

@Larce 问题已更新。

【参考方案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;

【讨论】：

@Larce 嘿伙计们，我正在尝试重新创建类似这个解决方案的东西，但 require 调用对我不起作用.. 有什么想法吗？ ***.com/questions/48800251/…

@Larce，为什么裸露的this.updateData 可以作为完成的回调函数，而this.updateData(result) 不起作用？如果我用一个匿名函数替换this.updateData，它接受结果和console.log，它可以工作。

【参考方案2】：

你需要绑定getData():

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

【参考方案3】：

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

【讨论】：

请注意，这是由 react-papaparse 的创建者发布的。