我正在使用
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()中可用,但我想提取它.
我应该如何将数据存储在状态或其他变量中,以便我可以将其用于图形？
解决方法
问题：
您尝试在函数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,// 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;
