如何使用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屋!