javascript 如何使用 Papa Parse 从 CSV 文件中提取数据到 React 状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46849677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to extract data to React state from CSV file using Papa Parse?
提问by Amanshu Kataria
I'm using Papa Parseto parse a CSV file for Graphs. I want to store the data in React stateafter 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.
我正在使用Papa Parse来解析图表的 CSV 文件。我想在解析文件后将数据存储在React 状态。Papa.Parse() 不返回任何内容，结果异步提供给回调函数。此外， setState() 在异步回调中不起作用。这个问题类似于Retrieving parsed data from CSV。
I tried storing the data in state using below code, but as expected it didn't work.
我尝试使用以下代码将数据存储在 state 中，但正如预期的那样，它不起作用。
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().
这是我在 getData() 中设置状态时得到的错误。
The data is usable inside getData(), but I want to extract it.
数据在 getData() 中可用，但我想提取它。
How should I store the data in state or in some other variable so that I can use it for Graphs?
我应该如何将数据存储在状态或其他一些变量中，以便我可以将它用于图形？
回答by Larce
The problem:
问题：
You try to call this.setState in the function getData. But this does not exist in the context of this function.
您尝试在函数 getData 中调用 this.setState。但这在此函数的上下文中不存在。
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;
回答by Bunlong
You can try react-papaparsefor an easy way. For more detail about react-papaparse please visit react-papaparse. Thanks!
你可以试试react-papaparse一个简单的方法。有关 react-papaparse 的更多详细信息，请访问react-papaparse。谢谢！
回答by Sandip Kumar Sharma
You need to bind the getData():
您需要绑定getData()：
function getData(result) {
console.log(result); // displays whole data
this.setState({data: result}); // but gets error here
}.bind(this)
