为了回答我自己的问题,我可以像这样重写它(/src/controllers/data-controller/data- controller.js
,添加了完整的代码以提高清晰度):
import React from 'react';
import Papa from 'papaparse';
import {withRouter} from 'react-router-dom';
class DataController extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
this.getData = this.getData.bind(this);
}
componentWillMount() {
this.getCsvData();
}
fetchCsv() {
return fetch('/data/data.csv').then(function (response) {
let reader = response.body.getReader();
let decoder = new TextDecoder('utf-8');
return reader.read().then(function (result) {
return decoder.decode(result.value);
});
});
}
getData(result) {
this.setState({data: result.data});
}
async getCsvData() {
let csvData = await this.fetchCsv();
Papa.parse(csvData, {
complete: this.getData
});
}
render() {
return (
<section className="data-controller">
...
</section>
);
}
}
export default withRouter(DataController);
在这里,我使用内置提取功能像流一样获取它,然后使用内置流读取器读取流,并使用解码数据TextDecoder
。我也不得不移动文件。在它进入之前,/src/controllers/data- controller
我不得不将其移动到/public/data
。